Hi friends, hope you are doing good. Today I am going to share very common and usefull things with you. After this tutorial you will be able to create bootstrap model popup.
I will let you know how to create model popup with example and screenshot. Before start to creating model popup, i assume you have knowledge of basic HTML & CSS.
Add below JS and CSS files before head tag closed like below example. I have added CSS & JS files from bootstrapcdn server to reduce webpage load time.
1 2 3 4 5 6 7 8 | <head> <title>Bootstrap Example</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> |
Bootstrap available with two options small and large. Below is the small & large bootstrap popup code. You can use as per your requirement. You can also customize this model popup by adding custom styles according to you themes/templates.
Add below class to call small model popup.
1 | <div class="modal-dialog modal-sm"></div> |
1 2 3 4 5 6 7 8 9 10 | <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <p>Add some text in the modal.</p> </div> </div> </div> |
Add below class to call large model popup.
1 | <div class="modal-dialog modal-lg"></div> |
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 | <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> |
I hope this will help you to create model popup. If you like this article, do like & share it with your friends on social media. Don’t forget to follow us on Facebook and Twitter to learn cool bootstrap tutorials.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Bootstrap, bootstrap dialog, bootstrap dialog modal, bootstrap modal examples, bootstrap popup window example, bootstrap tutorials, jquery modal bootstrap, modal popup bootstrap, modal window bootstrap, modal window in bootstrap, modals bootstrap example
