Responsive Accessible Modal Plugin With jQuery - Modaal

Responsive Accessible Modal Plugin With jQuery - Modaal
File Size: 432 KB
Views Total:
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 folowing 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');

Change log:

2016-06-23

  • v0.3.0

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