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 withmodaal 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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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 .