Creating popups or prompts in bootstrap is fairly simple. In bootstrap, it is known as modal.
A modal is a component of the Bootstrap framework, which allows you to create awesome popups or pull over a container. To create popups or modal we can say you can use the following code template.
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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>
You can put the above code template just before your body tags ends.
Once you have hooked up the basic HTML code, then you need some trigger to work its magic. So in bootstrap modal can be trigger via and attribute passing in a button or link. When you press that button or link or div. Modal will popover.
There different ways to work with modal. Some of the ways which I have used and tested in past few years are mentioned below.
1. Using modal to show dynamic content.
Using modal to show dynamic content over Ajax. Is the most commonly used way of modal. As modal or popups in bootstrap allow you to do that. Basically when you are loading dynamic contents into modal body div. You must be careful to load the data before it will be visible. Otherwise, the user will first see the blank modal or popup. Then the content will be loaded.
But in some cases we cannot load the content first, then what we can do? We can put default loading image or gif. In to body div modal.
2. Using modal to show various forms.
Also, you can load forms dynamically on to modal. But need to refer it after the document has been fully loaded and rendered on to the page or we can say onto modal.
So these are the few ways with which you can use modal. In modern website.