Modal windows in Bootstrap are nothing but simple dialogue boxes that are used for displaying important information to the visitors. Modal windows typically contain special offers, login box, session timeout warnings etc. Modal windows are also used to get input from the user. For instance, modal windows can contain sign up forms, purchase order or feedback forms for customers.
Sample Modal Dialog
Let’s take our first Example of developing a Modal using Bootstrap. Let’s look at the index.html page which contains a button. When the button is clicked, a modal window is populated containing a header, some messages and footer. The code of the index.html page is as follows:
The HTML button that is actually a link but using Bootsrap classes we have made it look like a button of large size and its outlook will be similar to a primary button of dark blue color. It can be seen that the HTML link contains two attributes i.e data-toggle with value “modal” and href attribute with value “#BootstrapModal”. The former attributes states that this link is used to open a modal window while the later attribute specified that the id of the modal which will be open when the link is clicked should be “BootstrapModal”. In case of button the data-target attribute refers to the id of the modal to be opened.
Now if you look at the code of the Modal, you should see that it has a unique id of “BootstrapModal”. This is necessary since the controller which is a link in this case targets this id. The modal-dialog class is used to set the width and height of the modal window while modal-content class sets the styles associated with the modal. The output of the aforementioned code will be a button centered at the top of the page and when this button is clicked a modal window shall appear as shown in the following figure.
You can see a cross button at the top right corner of the modal. If you remove the following line from your modal code, this cross shall disappear.
</pre> <pre><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></pre> <pre>
Furthermore, you can see classes like modal-header, modal-body, and modal-footer which are used for creating header, body and footer sections of the modal window.
Changing Size of the Modal
The size of the modal can be changed by using modal-lg and modal-sm classes in conjunction with the modal-dialog class. The following line of code shall decrease the size of the modal.
</pre> <pre><div class="modal-dialog modal-sm"></pre> <pre>
The corresponding modal will look like the one shown below:
Similarly, if the following line is added in the code:
<pre><div class="modal-dialog modal-lg"></pre>
it will result in large modal box as shown in the following figure:
Bootstrap is a powerful library for front end software development. This article bears witness to the amazing power of bootstrap. We saw how simple it is to create a complex modal window via bootstrap. For more interesting articles, keep visiting our blog.