Modal dialogs

Modal dialogs are popup overlay dialog boxes suitable for actions like confirmations, however, when used right, any kind of content is allowed - extensive content or form content should be used with caution.

Modal dialog component

A modal dialog needs to have the structure specified below and should be placed as high in the DOM level hierarchy as possible - ideally be a direct descendant of the body and is initially hidden until it is toggled by a trigger action. Below is a rendered representation of an open modal dialog along with its markup.

Code output
HTML Markup
Copy<div id="modal" class="modal">
  <div class="modal-dialog-wrapper">
    <div class="modal-dialog">
      <div class="modal-box">
        <div class="modal-header">
          <h3>Modal Dialog</h3>
        </div>
        <div class="modal-body">
          <p>Please confirm your action.</p>
        </div>
        <div class="modal-footer">
          <a class="btn btn-faded" data-toggle="dismiss-modal">Dismiss</a>
          <a class="btn btn-main" data-toggle="dismiss-modal">Confirm</a>
        </div>
      </div>
    </div>
  </div>
</div>

Usage

Modal dialog functionality can be enabled and controlled using HTML data attributes or Javascript.


Via data attributes

Modal dialog toggle functionality is enabled by adding a data-toggle="modal" on a button, along with a data-href="#id" where id is the targeted modal dialog id. A button with a data-dismiss="modal" attribute, usually placed inside the model component markup, hides the modal. The button below serves as a live example of a modal dialog.

Adding data-toggle="dismiss-modal" on a .modal-dialog allows the modal to be dismissed by cliking anywhere outside the modal-box when a modal dialog is open.
Code output
HTML markup
Copy<button class="btn btn-main" data-toggle="modal" data-href="#example-modal">Launch modal dialog</button> <!-- modal dialog trigger with data-hreft="#example-modal"-->

<div id="example-modal" class="modal"> <!-- modal dialog with id="example-modal"-->
  <...>
  <div class="modal-footer">
    <a class="btn btn-faded" data-toggle="dismiss-modal">Dismiss</a> <!-- modal dialog is hidden using the data-href="dismiss-modal" attribute -->
    <a class="btn btn-main" data-toggle="dismiss-modal">Confirm</a>
  </div>
</div>

Via Javascript

Modal dialogs that hold a unique id can be called using Javascript.

Copy$('#id').modal()

Javascript methods

The following methods are available for modal dialogs using their unique id.

Method Description
Copy$('#id').modal('toggle')
Toggles a modal with id="id".
Copy$('#id').modal('show')
Opens a modal with id="id".
Copy$('#id').modal('hide')
Hides a modal with id="id".

Javascript events

The modal component exposes events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the modal dialog component and are linked directly to the modal dialog and not the control triggering elements, like the buttons triggering the modal dialogs.

Event type Trigger hook
Copy$('#id').on('show.sky.modal', function(e) {
  // Extend function
});
Fires just before the modal opening animation starts.
Copy$('#id').on('shown.sky.modal', function(e) {
  // Extend function
});
Fires immediately after the modal opening animation completes.
Copy$('#id').on('hide.sky.modal', function(e) {
  // Extend function
});
Fires right before the modal hiding animation starts.
Copy$('#id').on('hidden.sky.modal', function(e) {
  // Extend function
});
Fires immediately after the modal hiding animation completes.
It is possible to use a unique class instead of an id when using the above Javascript events.