In this tutorial, we will discuss the very useful Bootstrap jQuery plugin, the Modal box.

Bootstrap Modal box is a lightweight multi-purpose JavaScript pop-up window that is customizable and responsive. You can use it to display warning Windows, videos, and images on your website. Websites built with Bootstrap can use modal boxes to display terms and conditions (as part of the registration process), videos, and even social media widgets.

To better understand it, let’s take a look at the components of the Bootstrap modal box.

The Bootstrap mode box is divided into three parts: header, body, and footer. Each part has its own meaning, so we should use them correctly. We will discuss these later. What’s most exciting about Bootstrap modal boxes? You don’t need to write any JavaScript code to use it! All the code and styles are predefined by Bootstrap. All you need to do is trigger it with the right tags and attributes.

Default modal box

The default modal box looks like this:

To trigger the modal box, you need to add links or buttons. The trigger element’s tag might look like this:

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

Copy the code

Notice that the link element has two custom data attributes: data-toggle and data-target. Toggle tells Bootstrap what to do, and Target tells Bootstrap which element to open. So every time a link like this is clicked, a modal box with the ID “basicModal” appears.

Now let’s look at the code needed to define a modal box:

<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">&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>Copy the code

The parent div of the modal box should have the same ID as the one used in the trigger element above. In our case id=”basicModal”.

Note: Custom attributes in the parent modal box elementaria-labelledbyandaria-hiddenMake it accessible. It’s good practice to make your site accessible to everyone, so you should use these properties because they don’t negatively affect the normal functionality of modal boxes.

In the HTML code for the modal box, we see a wrapped DIV nested inside the parent modal box div. The div class modal-Content tells bootstrap.js where to look for the contents of the modal box. Within this div, we need to place the three parts mentioned earlier: the header, the body, and the footer.

The modal box header, as the name suggests, is used to add a title to the mode or other elements such as the “X” close button. These elements should also have a data-dismiss attribute that tells Bootstrap which element to hide.

Then we look at the body of the modal box. Think of it as an open canvas to which you can add any kind of data, including embedding YouTube videos, images, or anything else.

Finally, let’s look at the footer of the modal box. This area is right-aligned by default. In this area, you can place “save”, “close”, “accept” and other action buttons, which are associated with the behavior of the “modal box”.

Change the size of the modal box

I mentioned earlier that the Bootstrap modal box is responsive and flexible. We’ll see how to change its size in this section.

Bootstrap 3.3.7 has two new styles for modal boxes: large and small. Adding a modifier class modal-LG to a Divmodal-Dialogdiv gives you a larger modal box, and adding modal-SM gives you a smaller modal box.

Activate the modal box using jQuery

Modal boxes are a jQuery plugin, so if you want to use jQuery to control modal boxes, you need to call the.modal() method on the selector of modal boxes. Such as:

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

Copy the code

The “options” here are JavaScript objects that can be passed to custom behavior. Such as:

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

Copy the code

Available options include:

  • backdrop: This could betrueorstatic. This defines whether you want the user to be able to close the mode by clicking on the background.
  • keyboard: If the value is set totrueThe modal box will be closed with the ESC key.
  • show: Used to open and close the modal box. It can betrueorfalse.
  • remote: This is one of the coolest options. It can be used with jQueryload()Method to load remote content. You need to specify external pages in this option. The default isfalse.

Bootstrap Event of a modal box

You can further customize the common behavior of the Bootstrap mode by using various events that are triggered when the modal box is opened and closed. These events must be bound using jQuery’s.on() method.

Available events are:

  • Show.bs. modal: Triggered before the modal box is opened.
  • Shown. Bs. modal: Triggered after the modal box is displayed.
  • Hide.bs. modal: Triggered before a modal box is hidden.
  • Hidden.bs. modal: Triggered after mode is closed.
  • loaded.bs.modal: Use the aboveremoteOption fires when remote content is successfully loaded into the content area of the modal box.

You can use one of the above events like this:

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

Load remote content in the modal box

There are three different ways to load remote content in Bootstrap mode.

The first method, as described above, is to use the remote option in the object Options. The other two methods are JavaScript free, as shown below.

You can provide a value for the href attribute in the trigger element of the modal box. In our case, the trigger is a link. For example, we could include the URL in a particular page without using the value # we mentioned earlier:

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

Copy the code

You can also provide custom data-remote data attributes for triggering elements instead of using href attributes. Such as:

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

Copy the code

conclusion

The modal box is one of the best plug-ins Bootstrap 3 has to offer. For junior designers, it’s one of the best ways to load content in a popup without any JavaScript code.