MODAAL, A plugin with right mix of accessibility and quality

Posted By : Sachin Arora | 26-Nov-2018

Modaal is a  plugin which is WCAG 2.0 accessible modal window plugin. This plugin is different as it is right mix of quality, flexibility, and accessibility. This plugin provides many features for accessibility like : 

  • It saves page focusing state when the modal is open.
  • It maintains tab scope to the modal content.
  • It provides customization for modal title and ARIA support.
  • Provides keyboard control for closing modal and also for gallery next and previous.
  • It has been optimised for assistive technologies and screen readers.

 

Setup
  
To get started with
modaal plugin  you can use package managers like :

bower install  modaal

npm install  modaal

Or you can download the zip file and then you need to copy and paste js/modaal.min.js  in your project and you also need to copy and paste the plugins css file modaal.css , it provides both SASS and CSS file for flexibility. 

Usage

After setup, the first thing you will have to do is to trigger the modal window. It is recommended to have a unique ID for the hidden element on your page containing your modal content.

<a href="#inline" class="inline">Show</a>
<div id="inline" style="display:none;">
	<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornar consectetur et.</p>
</div>

$('.inline').modaal();

If you dont want to trigger element using <a href ="" > ,  you can use content_source value like : 

<button class="inline">Show</button>
<div id="inline" style="display:none;">
	<p>Cras justo odio, dapibus ac facilisis in. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>

$('.inline').modaal({
	content_source: '#inline'
});

Configuration

It provides many configuration options like type having values ajax, inline, image, iframe, confirm to specify the type of modal we are using, content_source, animation, animation -speed, background etc. with these options it provides flexibility to control each part of modal.

$('.my-link').modaal({
	type: 'ajax',
	loading_content: 'Loading content, please wait.'
});

It also helps us to create modal with an image and videos for Example:

Image Gallery Modal 

<a href="path/to/image-1.jpg" data-group="gallery" class="gallery">Show</a>
<a href="path/to/image-2.jpg" data-group="gallery" class="gallery">Show</a>
<a href="path/to/image-3.jpg" data-group="gallery" class="gallery">Show</a>

$('.gallery').modaal({
    type: 'image'
});

Video Modal 

It loads an embedded video as provided in thehref link into an iframe , currently, the formats include youtube and vimeo.

<a href="https://player.vimeo.com/video/142216434" class="video">Show</a>

$('.video').modaal({
	type: 'video'
});

So, this is a helpful plugin which can provide you with flexibility, accessibility, and control over your modal.

Github: https://github.com/humaan/Modaal  

About Author

Author Image
Sachin Arora

Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .

Request for Proposal

Name is required

Comment is required

Sending message..