Servage Magazine

Bootstrap is by far one of the most widely used frameworks for CSS and Javascript effects and modules. It offers great capabilites to build functionality quickly, and well implemented theming allows you to create customized design as well. Many websites build their entire HTML for Bootstrap and simply add some custom elements plus the custom CSS. This does not mean you are copying everyone else. It is actually quite smart, because you are reusing a modular approach to create custom functionality and design. It looks good and usually works faster than own solutions.

The basic modal dialog

Bootstrap dictates how you should structure your code to facilitate a modal dialog. You can, however, build this code into your site in different ways. For example have it ready in the DOM, but hidden for later use. Alternatively you can build it dynamically on demand. Below is example code for a modal dialog with Bootstrap CSS classes.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        <p>Body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

Elements of the dialog

Each dialog consists of a base dialog container, which can have one or multipe content containers for a head, body and footer in the dialog. Bootstrap automatically styles the darkened overlay element to hide everything else in the background while the modal is open. None of the content elements are required and you have great flexibility when it comes to customizing content and design of your dialog. Remember that Bootstrap essentially just gives you the capability to open a modal dialog with a default design and behavior, but you effectively decide exactly when, how and where it will be triggered.

Open modal dialog with button and data attributes

The quickest and easiest way to use a model is by having the modal element hidden in your DOM, and trigger it to open via data-attributes on another element, like a button for example.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Open modal dialog with Javascript function

In some more advanced cases you may wish to control the display of a modal directly via Javascript. This is useful if the modal is a result of some more complex Javascript instead of a direct user interaction with a button.

// Show the modal via Javascript
$('#myModal').modal('show');

// Hide the modal via Javascript
$('#myModal').modal('hide');

There are plenty of practical uses for dialogs. This should get you going to implement them on your site. Remember to include the relevant Bootstrap Javascript and CSS files according to Bootstrap’s getting started guide.