Tiny Unobtrusive jQuery Modal Window Plugin - Modaly

Modaly is a lightweight, fast jQuery plugin that makes it easier to display modal windows on your webpages.

How to use it:

1. Load the necessary jQuery library together with the jQuery modaly plugin's JavaScript and Stylesheet in the webpage.

<link rel="stylesheet" href="jquery.modaly.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.modaly.js"></script>

2. Create a modal toggle link pointing to an anchor and this anchor will be a container as displayed below:

<a href="#default">
  Click here to open
</a>

<div id="default">
  <div class="header">
    <h3>Modal Title</h3>
    <input type="button" value="×" class="modaly-close">
  </div>
  <div class="body">
    Modal Body
  </div>
</div>

3. Initialize the modal plugin and you're done.

$('a').modaly();

4. Plugin's default options.

$('a').modaly({

  // anchor attribute used to find the modal.
  attribute:    'href',

  // prevents the modal to open
  block:        false,

  // shows close button
  closeButton:  true,

  // shows background overlay
  closeOverlay: true,

  // CSS class of close button
  closeTarget:  '.modaly-close',

  // ESC to close the modal
  esc:          true,

  // opacity of the background overlay
  overlay:      .5,

  // prevent or not the click action on binded element
  prevent:      true,

  // animation speed
  speed:        200,

  // distance between top of window and the modal
  top:          undefined
  
});

5. API methods.

// Open the modal.
$('a').modaly('open');

// Close the modal.
$('a').modaly('close');

// Block or unblock the modal.
$('a').modaly('block', boolean);

Change log:

2017-11-14

• refactor

2017-03-11

• open can receive keys to be removed from modal

---

This awesome jQuery plugin is developed by wbotelhos. For more Advanced Usages, please check the demo page or visit the official website.