Blog

  • 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 the
    href 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  

Tags: jquery

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com