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
• Modal dialog usage
• Usage
  • Via data attributes
  • Via javascript
  • Javascript methods
  • Javascript events

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.

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.

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

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

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

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.

Copy$('#id').on('show.sky.modal', function(e) {
  // Extend function
});

Copy$('#id').on('shown.sky.modal', function(e) {
  // Extend function
});

Copy$('#id').on('hide.sky.modal', function(e) {
  // Extend function
});

Copy$('#id').on('hidden.sky.modal', function(e) {
  // Extend function
});