Modaly - A Tiny Modal
Modaly is a jquery plugin that generates a tiny modal window.
Required Files
- jquery.modaly.css
- jquery.modaly.js
Options
attribute: 'href' // Changes the anchor's attribute. block: false // Prevents the modal to open. closeButton: true // Show the close button. closeOverlay: true // Enable close modal clicking on overlay. closeTarget: '.modaly__close' // Hook of the close button. esc: true // Enable the key esc to close the modal. overlay: .5 // Overlay applied on overlay. prevent: true // Prevent the click action on binded element. speed: 200 // Speed to open and close the modal. top: undefined // Distance between top of window and the modal. visible: false // Keeps the modal visible on screen.Usage
<div id="modal"> <span class="modaly__close">x</span> </div><a href="#modal">open</a>$('a').modaly();Callbacks
Callbacks are triggered over the modal element.
'modaly:opened': triggered when modaly is opened. 'modaly:closed': triggered when modaly is closed.Functions
$('a').modaly('open'); // Open the modal. $('a').modaly('open', { key: 'value' }); // Open and add params at modal. $('a').modaly('close'); // Close the modal. $('a').modaly('close', ['key']); // Close and removes keys data from modal. $('a').modaly('block', boolean); // Block or unblock the modal.
