HTML & CSS
Article

Understanding Bootstrap Modals

By Syed Fazle Rahman

In my previous tutorial, I explained how powerful Bootstrap 3 is for a novice designers. It ships with some of the best ready-to-use JavaScript and jQuery components and plugins. Recently the framework got a major update with version 3.1.0, bringing several important and necessary changes to the framework.

In this tutorial we will be talking about one of the most useful jQuery Bootstrap plugins, The Modal.

The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. It can be used to display alert popups, videos, and images in a website. Websites built with Bootstrap can use the modal to showcase (for example) terms and conditions (as part of a signup process), videos (similar to a standard light box), or even social media widgets.

Now let’s examine the different parts of Bootstrap’s modal, so we can understand it better.

The Bootstrap Modal is divided into three primary sections: the header, body, and footer. Each has its own significance and hence should be used properly. We’ll discuss these shortly. The most exciting thing about Bootstrap’s modal? You don’t have to write a single line of JavaScript to use it! All the code and styles are predefined by Bootstrap. All that’s required is that you use the proper markup and the attributes to trigger it.

The Default Modal

The default Bootstrap Modal looks like this:

Default Bootstrap modal

To trigger the modal, you’ll need to include a link or a button. The markup for the trigger element might look like this:

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

Notice the link element has two custom data attributes: data-toggle and data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.

Now let’s see the code required to define the modal itself. Here is the markup:

<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">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</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>

The parent div of the modal should have the same id as used in the trigger element above. In our case it would be id="basicModal".

Note: Custom attributes like aria-labelledby and aria-hidden in the parent modal element are used for accessibility. It is a good practice to make your website accessible to all, so you should include these attributes since they won’t negatively affect the standard functionality of the modal.

In the modal’s HTML, we can see a wrapper div nested inside the parent modal div. This div has a class of modal-content that tells bootstrap.js where to look for the contents of the modal. Inside this div, we need place the three sections I mentioned earlier: the header, body, and footer.

The modal header, as the name implies, is used to give the modal a title and some other elements like the “x” close button. This should have a data-dismiss attribute that tells Bootstrap which element to hide.

Then we have the modal body, a sibling div of the modal header. Consider the body an open canvas to play with. You can add any kind of data inside the body, including a YouTube video embed, an image, or just about anything else.

Lastly, we have the modal footer. This area is by default right aligned. In this area you could place action buttons like “Save”, “Close”, “Accept”, etc., that are associated with the action the modal is displaying.

Now we are done with our first modal! You can check it out on our demo page.

Changing the Modal’s Size

Earlier I mentioned that the Bootstrap modal is responsive and flexible. We will see how to change its size in this section.

The modal comes in two new flavors in Bootstrap 3.1.0: Large and Small. Add a modifier class modal-lg to the modal-dialog div for a larger modal or modal-sm for a smaller modal.

Activating the Modal with jQuery

The modal is a jQuery plugin, so if you want to control the modal using jQuery, then you need to call the .modal() function on the modal’s selector. For Example:

$('#basicModal').modal(options);

The “options” here would be a JavaScript object that can be passed to customize the behaviour. For example:

var options = {
    "backdrop" : "static"
}

Available options include:

  • backdrop: This can be either true or static. This defines whether or not you want the user to be able to close the modal by clicking the background.
  • keyboard: if set to true then the modal will close via the ESC key.
  • show: Used for opening and closing the modal. It can be either true or false.
  • remote: This is one of the coolest options. It can be used to load remote content using jQuery’s load() method. You need to specify an external page in this option. It is set to false by default.

Bootstrap Modal’s Events

You can further customize the normal behaviour of the Bootstrap modal by using various events that are triggered while opening and closing the modal. These events have to be bound using jQuery’s .on() method.

Various events available are:

  • show.bs.modal: fired just before the modal is open.
  • shown.bs.modal: fired after the modal is shown.
  • hide.bs.modal: fired just before the modal is hidden.
  • hidden.bs.modal: fired after the modal is closed.
  • loaded.bs.modal: fired when remote content is successfully loaded in the modal’s content area using the remote option mentioned above.

You can use one of the above events like this:

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

Loading Remote Content in the Modal

There are three different ways to load remote content inside a Bootstrap modal.

The first way is by using the remote option inside the options object, as mentioned above. The other two ways are done without JavaScript, as shown below.

You can provide a value to the href attribute inside the modal’s trigger element. In our case, the trigger is a link. For example, instead of the # value we included earlier, we can include a URL to a specific page:

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

You can also provide a custom data attribute of data-remote to the trigger element instead of using the href attribute. For example:

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

Conclusion

The modal is one of the best plugins offered by Bootstrap 3. For a novice designer, it is one of the best ways to load content inside a popup screen without writing any JavaScript.

Read Bootstrap 3 – JavaScript Components for more JavaScript plugins available from Bootstrap and if you’re new to Bootstrap, you can check out my Bootstrap 3 Tutorial.

Below is a CodePen demo with 3 example modals.

See the Pen Bootstrap 3.1.0 Modal Demos by SitePoint (@SitePoint) on CodePen.

Download Bootstrap modal demo

Still learning your Bootstrap from your Foundation? Learnable has you covered. Start a free trial today, and read our best-selling Bootstrap guide Jump Start Bootstrap totally free!

  • wisenerl

    Thanks for this, some useful tips there.

  • Jingqi Xie

    Bootstrap is, as I would have to say, a great front-end framework. But I wonder how much more weight the page would have to pay for including this framework.

    • lance bumanglag

      Unless the size is absolutely a major factor, you can always download a custom version of bootstrap. I used it for one of our landing pages that has a major concern on bandwidth, and I only ended up using 4kb.

    • http://www.lynnais.com/ Lynnais

      You have less in it, use it to import the components you need only, sometimes i only need the grid.

  • qasimrazabaig

    thanks!

  • rrcatto

    These bootstrap articles are very welcome.

  • Phoenix

    Foundation Zurb is a lot lot better. Having been a bootstrap lover in the past I found the customizing of stuff precisely like this, modal etc, to be hugely cumbersome..

  • Hetal Patel

    Thanks For this excellent tutorial, I wanna use tinymce editor to my responsive site. Please guide me for it

  • crowell256aa

    Thanks for this. Useful.

  • Himanshu Raval

    how to change backdrop opacity of individual modal?

  • Himanshu Raval

    How to change individual modal backdrop opacity and background color?

  • zuhry

    how can i setting dynamically the data-toggle=”modal” and data-target=”#largeModal” with javascipt, i mean what function to remove and add the data-toogle and data-target value… Thank’s

  • zuhry

    i create one modal with dynamic content and remote url and i add one pagging but the problem is when i click the next button on paging, my modal is closed. so can u help me please??

  • madhavi
  • madhavi

    how to display tooltip for the anchor tag which launches modal

  • J.D. Schuitemaker

    I have troubles to creating a modal that fills the screen (be it mobile or desktop) for 95% and have the footer and header stick to their positions and content scroll-able. Do you have an example how to do this?
    Thank you for your nice article.

  • Sunil kumar

    Thanks

  • kaushik

    How to add scroll bar to modal ,when we have overflow of contents

    • Carlos López

      just add to the modal-body div a css attribute with overflow-y:scroll and you are set

  • Eskindir

    i’m having a bit of a hard time trying to access the dom of the page that was loaded on my modal.

  • morris

    great stuff brah

  • http://pk.linkedin.com/pub/muhammad-usman/40/b94/591/ Muhammad Usman

    great job thanks brother I got many things from this articles

  • kourosh

    Hi and thanks,
    times; is rendered as a text

  • Judderdude

    I am a Bootstrap Noob and your coding example is the only one I have managed to get working thus far (Kudos!) but try as I may, I cannot get the code to insert a video into a modal window! Can you please let me know how to do this within the code example you have provided and I can assure you I will buy at least two of your books (Bootstrap and html 5) – thanks in advance.

  • Dheerendra Pratap Yadav

    how can get action on save change,?

    • Kamil

      Hey, did you find solution?

  • http://spee.itis.ac.mz Ivan Oscar

    hey guys, I’m tentd a problem, I will describe:

    Click the submit button in the modal, it is supposed to capture the fields that form in the modal.

    But what happens is that all fields delvovem me empty string (” “), not allowing this so that you can save the data in the database, can anyone help me?

  • isaacalves

    How would you set focus() on an input inside a Modal before the Modal’s ‘show’ event? it doesn’t work with the ‘shown’ event, apparently because at that point the input is not yet rendered on the screen. But I also don’t want to wait for the ‘shown’ event, and placing a setTimeout on a ‘show’ event handler doesn’t seem to work very well, except when I use a relatively high value (ex: 500ms) like on this example: http://embed.plnkr.co/G0dnxAObLAJ6M1V7bVhz/preview

  • http://salvatorecapolupo.it/ Salvatore Capolupo

    dismiss management seems very hard, in bootstrap…

  • RutvikPrajapati

    how can we fade out modal automatically in some ” .success() ” method ?

  • Oscar1

    I have a modal with some content fields, when you save the data you can display it on a pdf (pdfsharp), i and wondering if you would you happen to know if there is any way to view this data from the modal fields without having to save first? im new to bootstrap and coding and am hoping someone can point me in the right direction.
    thanks

  • Christian Rauchenwald

    tiny mistake in your code -> &times; should be ×

  • Christian Rauchenwald

    lets try again “& amp;& times” should be only “& times;”

  • red_smeg

    How can you use the modal to submit a form is that possible ??

  • http://majestic-shopping.com dwi ade Riandayani

    Thanks! you help me with “data-remote”
    thank you once again

  • Jitender

    I am using modal in a project. I know how to open a page in modal.
    i want to search with php in first page , after this there are some results i click on to view result, now i want to save this data on my first page from where i opened this modal.

    I can copy data from modal into my bootstrap page.
    But i am unable to save data from this searched result.

    Do you have any idea

  • Diana Avila

    Hi,
    Thanks for the explanation. I trying to setup a store locator plugin in wordpress, this locator is meant to appear in modal way. When the modal is triggered the map doesn’t load, and shows empty. Is it possible to add the map shortcode to the data-remote property?

    Thanks!

  • Gilbert Diaz

    I would like to learn how to include an image in the modal!!

  • Ziyad

    i have a problem using this modal, the thing is sometime the modal is not well loaded so we can’t do anything on this web page. i don’t know if it’s a performance problem or something else. Please help

  • Akash

    Can i make my own model means that we have two basic model sm and lg. can i create new size of model? what i need to do?

  • msk

    Trying to insert data using the button on modal.but not able to do it. Is that possible ?

  • tshering

    Thanks for this, My question is how to pop up the form from other page, which is not in same page?

  • greatmj

    Thanks for this extremely easy to understand tutorial!

  • Miloš

    Nice article, thanks!

  • http://www.canyurdaer.com Can Yurdaer

    Thank you for share information nice article.

  • http://about.me/alifda Dyah Alifda

    I have a search form inside the modal,and I want the search result is displayed in that same modal. How can I do that?

  • kusuma

    the model should pop up with out clicking

  • Guru

    i want to open another popup on existed popup without closing existed popup. how to do this?please tell me.

  • Shine Arts Kannan

    how can i change the bootstrap modal box in page load. ?

  • Shine Arts Kannan

    pls help me i want modal box at page load . but i dont how to do it.

  • referag

    please can someone show me how toi use this :

    TITLE

    in the link below: http://nakupanda.github.io/bootstrap3-dialog/

    As you see the code source is Runnable. but i want to use it with code source HIDDEN using only a simple button or menu link. thanks in advance

  • Dario Defilippi

    The Remote option has been deprecated.

    http://getbootstrap.com/javascript/#modals

    “This option is deprecated since v3.3.0 and will be removed in v4”

    I’ve faced a cache issue on IE using partial views and the remote option, i’ve resolved it recreating the modal-content every time via javascript and not using the remote option.

  • RIJU ALEX

    how to open a modal without button-click..?

  • Carlos López

    add an onclick action to the button. You can either do that by html adding the onclick attribute and setting the javascript function to fire, or add it via jquery $(“.btn-primary”).on(“click”, function(){})

    • test

      test

      • Lee Ting Rong

        0.0

  • Tofanelli

    Nice article man! quick question…. how to “split” the modal content? I want 2 columns… one side it will be some image or anything else, and the other side is a description or anything else…. any thoughts? =)

    Cheers =)

  • Fernando Herrera

    Amazing! thank you so much

  • Mohd Javed

    Can we change model popup size without using css class.using only bootstrap.js

  • Tiara Gizka Septi

    hi, thanks
    your tutorial is very answer what I was looking for and it was amazing

  • http://www.html5beginners.com html5beginners

    Nice demo, can we get few more examples..or any refrences in website for model boxes…

  • http://www.discoverbayog.net/ Oscar

    how can i use modal using a variable if its null or have something on it. The case is …. if i added some data to the database and then have it on session, then using that session-data a modal pops with a message of “You have Added this data on the database”

  • http://www.kodingmadesimple.com/ Valli

    Bootstrap rocks and you have explained it well. I found another good post about creating contact form using bootstrap modals. You can check out here http://www.kodingmadesimple.com/2015/06/twitter-bootstrap-modal-form-example-contact.html

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.