Responsive Accessible Modal Plugin With jQuery - Modaal
File Size: | 911 KB |
---|---|
Views Total: | 9285 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Modaal is a simple yet robust jQuery plugin that helps you create responsive, accessible and fully customizable modal windows on the webpage.
Features:
- Fully responsive and adapt to any screen sizes.
- Supports any media types such as images, inline text, photo gallery, iframes, ajax content, Vimeo / Youtube videos and Instagram photos.
- Also can be used as a confirm dialog.
- Fully accessible following the Web Content Accessibility Guidelines (WCAG) 2.0.
- Lots of configuration options and API.
- Easy to customize and config.
Basic usage:
1. Include jQuery JavaScript library together with the jQuery Modaal plugin's JavaScript and Stylesheet on the webpage.
<link href="modaal.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="modaal.js"></script>
2. Initialize the plugin and we're ready to go.
$('#selector').modaal();
3. General options with default values.
// ajax, inline, image, iframe, confirm. type : 'inline', // fade, expand, down, up animation : 'fade', // Animation speed animation_speed : 300, // Specify a delay value for the after open callbacks. after_callback_delay : 350, // Disable closing the modal via keypress or clicking the background. is_locked : false, // Hide the close modal button hide_close: false, // background color background: '#000', // Background overlay transparency. overlay_opacity: '0.8', // Allow to click to close on overlay background overlay_close: true, // Accessible title accessible_title: 'Dialog Window', // Set this to true to launch the Modaal window immediately on page open start_open: false, // Enable fullscreen mode fullscreen: false, // Additional CSS classes custom_class: '', // Enable background scroll background_scroll: false, // Specify width/height of the modal width: null, height: null,
4. Callback functions.
// before modal is opened before_open : function(){}, // after modal is opened after_open : function(){}, // before modal is closed before_close : function(){}, // after modal is closed after_close : function(){}, // intended to transform the source (href in an AJAX modal or iframe). source : function( element, src ){ return src; },
5. Confirm options & callback functions.
// text on confirm button confirm_button_text: 'Confirm', // text on cancel button confirm_cancel_button_text: 'Cancel', // title for confirm modal confirm_title: 'Confirm Title', // content for confirm modal confirm_content: '<p>This is the default confirm dialog content. Replace me through the options</p>', // Callback function for when the confirm button is pressed as opposed to cancel confirm_callback: function() {},
6. Gallery options & callback functions.
// Active class applied to the currently active image or image slide in a gallery 'gallery_active_item' gallery_active_class: 'gallery_active_item', // Callback function executed before the image slide changes in a gallery modal. before_image_change: function( current_item, incoming_item ) {}, // Callback function executed after the image slide changes in a gallery modal. after_image_change: function( current_item ) {},
7. Ajax options & callback functions.
// HTML content for loading message. loading_content : modaal_loading_spinner, // Class name to be applied while content is loaded via AJAX. loading_class : 'is_loading', // Class name to be applied when content has failed to load. ajax_error_class : 'modaal-error', // Callback for when AJAX content is loaded in ajax_success : function(){},
8. Specify the Instagram photo ID.
instagram_id : null
9. You can also pass the options listed above via inline data
attributes, as in 'data-modaal-type="instagram"'.
10. Close the modal manually
$('#selector').modaal('close');
Changelog:
2018-10-08
- v0.4.4: Script injection vulnerability in image gallery
2018-07-10
- v0.4.3: image gallery content source bug fix
2018-07-05
- v0.4.2: Safari bug fix - Update to self.lastFocus where safari wasn't supporting document.activeElement
2018-06-22
- v0.4.1: removal of unnecessary parameter in instagram oembed
2018-05-29
- v0.4.0: lots of bugs fixed.
This awesome jQuery plugin is developed by humaan. For more Advanced Usages, please check the demo page or visit the official website.