A Guide to Popup Dialogs With Real Bootstrap Modal Examples

Even if you are not familiar with the term of the Bootstrap modal, you have probably seen them in other websites. It usually happens in a case of error or alert: a popup dialog box appears, the whole page around it gets dimmed, and you have to close the box manually to see the page clearly again.

Bootstrap modal is a great way to attract the attention of your users when you need, for example, a lot of answers in your poll. It also works well to provide necessary information. In this tutorial, you will learn how to create and use them yourself.

We'll provide you with a few Bootstrap modal examples to analyze and try in a code editor to gain a better understanding, too.

Bootstrap Modal: Main Tips

• Using Bootstrap 4, you can create a modal.
• A modal is a component that is displayed as a popup dialog box over the page, making it ideal for things like error messages, alerts, AJAX forms.

Creating A Modal

Modals are created in two steps. First, you need a button that displays the modal, and the next thing is creating the modal and its content. In this tutorial, we are going to walk through the creation of a Bootstrap modal example.

By default, a Bootstrap modal is medium sized. You can change that by adding a certain class to the .modal-dialog container:

• .modal-sm decreases the size.
• .modal-lg increases the size.

Display Button

First, we will create a button that is going to display our modal. To do this, we will first create a simple Bootstrap 4 button and assign it two attributes with values that are essential for making it work as intended.

We will apply the data-target attribute with the value referencing the ID of the modal element itself and set data-toggle to modal. See how this works:

<button type="button" data-toggle="modal" class="btn btn-dark" data-target="#sampleModal">
  Show modal
</button>

Once this is done, we can move on to the modal itself.

Container

The modal is created by using a <div> container with the .modal class. You can add a fade-in animation as well by adding the .fade class as well.

Inside the modal, you can have a header, body and a footer, wrapped in a container with the .modal-dialog class. All of these are containers with appropriate classes applied: .modal-header for the header, .modal-body for the body, and .modal-footer for the footer:

<div id="sampleModal" class="fade modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Header -->
      <div class="modal-header">
        <h2 class="modal-title">This is a modal</h2>
      </div>

      <!-- Body -->
      <div class="modal-body">
        Some text
      </div>

      <!-- Footer -->
      <div class="modal-footer">
      </div>

    </div>
  </div>
</div>

Close Button

Inside the modal header or footer, you would usually have a button used to close the modal.

If you'd like to have an X button in the header, you will need to create a button with the type attribute set to button, the class .close, and the data-dismiss attribute with the value modal.

As for having a simple button with Exit written on it, you simply need to create a Bootstrap button and apply data-dismiss="modal" to it.

See how both of these are used in the example below:

<!-- X button for closing the modal -->
<button data-dismiss="modal" type="button" class="close">&times;</button>

<!-- "Exit" button for closing the modal --> 
<button data-dismiss="modal" type="button" class="btn btn-dark">Exit</button>

Note: a modal can also be closed by clicking anywhere outside its boundaries.

Bootstrap Modal: Summary

• Bootstrap modals look like popup dialog boxes that are displayed over a web page.
• You can find it useful for outputting error messages, alerts, forms, and similar components.