JAVASCRIPT

jQuery Modal

About

Modal window (aka lightbox) manager. Supports multipple styles in a single app. Multiple modal popups can be opened at the same time.


API

  • $.openModal(options): Opens modal popup based on provided options and returns modal instance.
  • $(selector).openModal(options): Reads options from HTML element and merges them with provided options before opening modal popup.
    • Opens modal popup.
    • options: An object literal which defines the settings for modal popup.
      • title: popup title.
      • content: popup content.
      • url: content URL. Content will be loaded via AJAX get method.
      • width: number - popup container width in pixels.
      • height: number - content container height.
      • onLoad: function () {} callback function fired after content has been loaded into content container.
      • onClose: function () {} callback function fired before closing the popup. Return false to prevent closing popup.
      • closeOnEscape: boolean - indicates whether to close popup when escape is pressed. Default value: true.
      • closeOnClick: boolean - indicates whether to cloase popup when clicked on overlay. Default value: true.
      • className: modal container class name. Default value: empty string.
      • loader: content to be displayed while content is being loaded. Default value: <div class="modal-loader">Loading...</div>.
      • htmlClass: class name to be added to HTML element when first modal opens. Class removed when last popup closes. Default value: modal-on.
      • templateId: custom template container ID.
      • openEffect: jQuery effect method used to open modal. Default value: fadeIn.
      • openDuration: jQuery openEffect duration. A string or number determining how long the animation will run. Default value: 100.
      • closeEffect: jQuery effect method used to close modal. Default value: fadeOut.
      • closeDuration: jQuery closeEffect duration. A string or number determining how long the animation will run. Default value: 100.
      • autofocus: indicates whether to focus first input field if any. Default value: true.

Usage

Html setup:

<a href="/expense-report.html" 
   class="demo" 
   title="Expense Report" 
   data-modal="{ width: 500, closeOnEscape: false }">
    View Expense Report
</a>

Open modal by reading options from the link:

// These two expressions bellow are identical:
$('.demo').openModal();

$.openModal({
    url: '/expense-report.html',
    title: 'Expense Report',
    width: 500,
    closeOnEscape: false
});

Template

Default modal template:

<div class="modal-context">
  <div class="modal-container" data-modal-control="container">
    <div class="modal-title" data-modal-control="title"></div>
    <div class="modal-close" data-modal-control="close"></div>
    <div class="modal-content" data-modal-control="content"></div>
  </div>
</div>

You may define your own template and pass it as a parameter:

<script type="text/html" id="modal-template">
    <div class="modal-context">
      <div class="modal-container" data-modal-control="container">
        <div class="modal-title" data-modal-control="title"></div>
        <div class="modal-close" data-modal-control="close"></div>
        <div class="modal-content" data-modal-control="content"></div>
      </div>
    </div>
</script>

You can use any classes. Modal popup controls are defined by data-modal-control attribute as you see in samples above. Valid attribute values are:

  • container: popup container element (required).
  • title: popup title element (optional).
  • close: popup close button (optional). Also, if popup content has elements that are marked with this attribute value, clicking on those elements will trigger close event.
  • content: popup content container (required).

Then specify template ID when initializing popup:

$('.demo').openModal({ templateId: 'modal-template' });

What is Sourcery?

All of these components are Open Source.