Tiny Unobtrusive jQuery Modal Window Plugin - Modaly

Tiny Unobtrusive jQuery Modal Window Plugin - Modaly
File Size: 90.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.