How the modal works

Before I will get into the modal component i Bootstrap, I would like to give you a few things that have changed since the beginning of the modals in Bootstrap.

  • Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking on the modal “backdrop” will automatically close the modal.
  • Bootstrap only supports one modal window at a time. Nested modals aren’t supported as the team behind Bootstrap, believe them that be poor user experiences.
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
  • Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See their browser support docs for details.
  • Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Here is some example code for a modal

You can copy and paste the following code into your own project to get a modal like this:

How to use Bootstrap’s JavaScript modal plugin to add dialogs to your site 1
Demo modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Source – Boostrap Official documentation.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">). Source – Bootstrap documentation.

Event TypeDescription
show.bs.modalThis event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modalThis event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modalThis event is fired immediately when the hide instance method has been called.
hidden.bs.modalThis event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Examples in my own project

I have been working on a school project, where i have added modals for handling things such as changing passwords, cropping images and placing orders. This includes success messages using SweetAlert.

Change password for the user

modal
Change password

Placing a new order in the Point of Sale module

How to use Bootstrap’s JavaScript modal plugin to add dialogs to your site 2
Placing an order with confirmation from SweetAlert

As you can see, here i got two modals, the succes message is triggered if we retrieve a success message back from the Sales Controller i developed i Laravel. Using a .then method in the JavaScript on the page, allows me to add a success message when order is complete.

Adding a new table to the system

How to use Bootstrap’s JavaScript modal plugin to add dialogs to your site 3
Add a new table

Above is a simple modal with a form allowing the user to enter a name for the table and then saving it to the database using a POST request to the controller. The routing in the application make sure that the request is routed to the correct method in the corresponding controller.

Leave a Reply