Introduction

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.

Before, bootstrap based Modals were developed by conjunction of complex HTML and Javascript/JQuery code. However, with Bootstrap framework, the process of creating modal window has become extremely seamless and straight forward. Though, in the backend, Bootstrap uses JQuery for displaying modal windows but the complexities of the code are hidden from the developer.

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:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>Bootsrap Modal Window</title>

<!-- Bootstrap core CSS -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->

<link href="css/style.css" rel="stylesheet">

</head>

<body>


<div class= "text-center">

<!—HTML Button -->

<a href="#BootstrapModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Open Bootsrap Modal</a>

</div>




<!-- Modal HTML -->


<div id="BootstrapModal" class="modal fade">


<div class="modal-dialog">


<div class="modal-content">


<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>


<h4 class="modal-title">This is a sample Modal</h4>


</div>



<div class="modal-body">



Do you understand how this Modal works? If not see, the code.




<small>Keep practicing, you will learn how to create this</small>


</div>



<div class="modal-footer">

<button type="button" class="btn btn-success" data-dismiss="modal">Okay, I Understand</button>

<button type="button" class="btn btn-warning">Take me to code</button>

</div>


</div>


</div>


</div>




<!-- Bootstrap core JavaScript ================================================== -->

<!-- Placed at the end of the document so the pages load faster -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

<script src="js/bootstrap.min.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

</body>

</html>

You can see in the above code that we are referring to Bootsrap CSS in the header section. Also at the end of the Body section we are referring to JQuery and JavaScript libraries as well. However, our main focus is on the HTML Button and Modal HTML section as mentioned in the comments.

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.

 

Sample modal dialog window displayed with two buttons

Sample modal dialog window displayed with two buttons

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

pic2

 

Similarly, if the following line is added in the code:

</pre>
<pre><div class="modal-dialog modal-lg"></pre>
<pre>

it will result in large modal box as shown in the following figure:

Modal window dialog with changed size

Modal window dialog with changed size

Outro

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.