Tiny Unobtrusive jQuery Modal Window Plugin - Modaly
File Size: | 90.2 KB |
---|---|
Views Total: | 1782 |
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.