Sometimes, it may be required to show some content in the popup. At that point, the best alternate is the bootstrap modal. Here we will implement the modal into our webpage. If you already know how to add modal and comes here for the code then the code is at the end of this post. But if you don’t know how to add modal to your webpage then follow these steps one by one,
Step 1 :
First of all add the following three files which are required to implement the bootstrap into any webpage.
|
1 2 3 |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
Step 2:
Now add the following code to the html file. This code will create a button. When you click on this button then the popup will be shown.
|
1 2 3 4 5 6 7 |
<div class="container"> <h2>Bootstrap Modal Demo</h2> <div class="row text-center"> <h3>The Basic Modal</h3> <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Open Modal</a> </div> </div> |
Step 3:
Till now, the button will not work because we have not added the code for the modal. To make this button working fine, add the following code into your file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- modal code --> <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Basic Modal</h4> </div> <div class="modal-body"> <h3>Modal Body</h3> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- modal code ends here --> |
This is all you need to implement the bootstrap modal into your web page.
Complete Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Modal By tutsocean</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row text-center"> <h3>The Basic Modal</h3> <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Open Modal</a> </div> </div> <!-- modal code --> <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Basic Modal</h4> </div> <div class="modal-body"> <h3>Modal Body</h3> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- modal code ends here --> </body> </html> |