How to create popup with bootstrap

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">&times;</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.

Code Sample for Modal Placement in html code

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.

Modal with loading svg

This will make the user understand that something is loading and need to wait. And as the content which you want to show has loaded into the body div of modal. Then that image automatically gets overwritten by the dynamic content. There other issues also with loading content with Ajax like few JavaScript plugins not working when you have to load the HTML content in to modal. So why it is so? Because our web browser interprets the codes. It won’t compile the code. So the JavaScript libraries which the newly loaded content requires didn’t really come into action. As these same JavaScript libraries are present in the main page. So make sure that if you are using any data libraries or JavaScript libraries. Load it along with the modal. As JavaScript is not actually required any specific location to load and come into action. So you can load that script in modal itself. So this is a way to use modal to load dynamic content using Ajax.


2. Using modal to show various forms.

Using modal to show various forms of the login form, user registration form, payment forms are simple to do. But when you want to load the content into specific fields which you have created statically onto you modal. Then you just have to refer that element and update the value using either plain JavaScript or using jQuery. I prefer to use jQuery, cause it is more convenient and easy to use.

Modal with login form

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.