Prem Tiwari - - Bootstrap, Freebies
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 9 | <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 27 | <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.
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
