Module: JSE/Libs/modal

Modal Dialogs Library

Library that handles modal dialogs within the app. This function depends on jQuery & jQuery UI dialog widget. You are able to select the HTML template to be displayed as a modal and set other parameters to readjust the modal behavior. If no template option is provided the library will search for a default "#modal_alert" element. Place the markup from the following example into your page to quickly display messages to the user.

Quick Usage Example (No Configuration)

Modal.message({
     title: 'My Title',      // Required
     content: 'My Content'   // Required
     buttons: { ... }        // Optional
     // Other jQueryUI Dialog Widget Options
});

Example With Default HTML

Insert the following HTML in your page:

<div id="modal_alert">
  <div>
    {{#content}}
    <div class="icon"> </div>
    <p>{{{.}}}</p>
    {{/content}}
  </div>
</div>

If you don't specify a template the library will use the "#modal_alert" element.

Modal.alert({
  title: 'My Modal Title',
  content: 'My modal content.',
  position: { my: 'center', at: 'center', of: $('#parent-element-id') }
});