Modaal

An accessible dialog window plugin for all humans.

Download from Github View Example
v0.3.1
A Humaan project
Scroll to content

Modaal is a WCAG 2.0 Level AA accessible modal window plugin.

Why another modal plugin?

It's hard to find a plugin with the right mix of quality, flexibility and accessibility. We thought it would be interesting to develop something that would work in a variety of projects, furthering the cause for an accessible web.

Accessibility Features

  • WCAG 2.0 Level AA Support
  • Saving page focusing state on modal open
  • Switching focus state to new content on modal open
  • Switch focus back to original focus state on modal close (eg. button clicked)
  • Maintained tab scope to modal content
  • ARIA support and customisation for modal title
  • Keyboard control for closing an open modal
  • Keyboard control for gallery next and previous
  • Default color contrast support optimised for readability
  • Accessible <button> close element with ARIA attribute
  • Optimised for assistive technologies and screen readers

Other Features

  • Fully responsive, scaling with browser width.
  • Modal types include inline content, ajax, image and image gallery, iframe, confirmation and Instagram photo.
  • Customisable CSS with SASS options
  • Inline attribute configuration support
  • Full-screen/viewport mode
  • Flexible close options and methods
  • Callback events for before and after open and close
  • Callback events for before and after image change in gallery.

Modaal Examples

Inline Attribute Configuration

Modaal has been developed to support common jQuery configuration options, but in an effort to extend functionality and widen it's usage we've developed support for inline data-option-name attribute support.

To enable this, the Modaal trigger link must have a class of modaal, then you can add attributes to the link as needed like so:

HTML<a href="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</a>

It's important to note, that configuration options that contain an underscore (_) in them need to be replaced with a hyphen (-), and prefixes with data-modaal- in it's respective html attribute. For example, overlay_opacity configuration would read data-modaal-overlay-opacity="0.8".

Show Inline Modaal

Inline Content

Fetches content from an existing element (using an ID) in the page and loads it into the content.

HTML<a href="#inline" class="inline">Show</a>
<div id="inline">
	Inline content goes here...
</div>
JS$(".inline").modaal();
Show Inline Modaal

Fullscreen Mode

Fullscreen mode will open the Modaal window to fill the entire viewport. If the content exceeds the height of the window, the dialog will scroll vertically to allow access to all content.

Fullscreen mode works best with inline and ajax based modals only. Currently no support for fullscreen images.

JS$('.fullscreen').modaal({
    fullscreen: true
});
Show Fullscreen Modaal

AJAX

Loads content via AJAX into the Modaal window based on the link href attribute.

HTML<a href="content.html" class="modaal-ajax">Show</a>
JS$('.modaal-ajax').modaal({
    type: 'ajax'
});
Show Ajax Modaal

Single Image Modal

Opens a single image.

HTML<a href="path/to/image.jpg" class="image">Show</a>
JS$('.image').modaal({
    type: 'image'
});
Show Single ImageThumbnail for single image

Image Gallery

Opens a series of images linked by a rel="group-name" attribute. Replace group-name with what your gallery group identifier.

HTML<a href="path/to/image-1.jpg" rel="gallery" class="gallery">Show</a>
<a href="path/to/image-2.jpg" rel="gallery" class="gallery">Show</a>
<a href="path/to/image-3.jpg" rel="gallery" class="gallery">Show</a>
JS$('.gallery').modaal({
    type: 'image'
});
Show Gallery Image 1Thumbnail for Gallery Image 1 Show Gallery Image 4Thumbnail for Gallery Image 4 Show Gallery Image 2Thumbnail for Gallery Image 2 Show Gallery Image 3Thumbnail for Gallery Image 3

Video

Loads in an embedded video as defined in the link href attribute, into an iframe. Currently tested formats include Youtube and Vimeo. Other that support iframe embedding should also work.

HTML<a href="https://player.vimeo.com/video/142216434" class="video">Show</a>
JS$('.video').modaal({
	type: 'video'
});
Show Video Modaal

Video Modaal Tips

The Modaal video type has been tested thoroughly using both Vimeo and Youtube. For best outcome, please ensure the url format looks like the one of the following below. We transplant this URL into an iframe which then each service provider controls all the necessary play back from there.

https://www.youtube.com/embed/cBJyo0tgLnw where the ID at the end is your unique video id. This can be found by selecting 'Share' on a youtube video, then clicking on 'Embed'. You'll find this URL within the content presented.

https://player.vimeo.com/video/109626219 where the ID at the end is your unique video id. This can be found by selecting 'Share' on a vimeo video (commonly seen on the right hand side), and by selecting the content within 'Embed'. You'll find the URL necessary towards the very beginning of that embed code inside src="".

iframe

Loads a url as defined in the link href attribute, into an iframe. This requires a set width and height for the Modaal to also be defined.

HTML<a href="http://humaan.com" class="iframe">Show</a>
JS$('.iframe').modaal({
	type: 'iframe',
	width: 700,
	height: 500
});
Show iFrame Modaal

Confirmation Modaal

Modaal window to prompt the user to Confirm or Cancel a particular action. Content can be pushed through including callback events as necessary. By default once open, it can not be closed until an action has been selected (such as Confirm/Cancel).

HTML<a href="javascript:void(0);" class="confirm">Show</a>
JS$('.confirm').modaal({
    type: 'confirm',
    confirm_button_text: 'Confirm',
    confirm_cancel_button_text: 'Cancel',
    confirm_title: 'Confirm Action XYZ',
    confirm_content: '<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>',
    confirm_callback: function() {
        alert('you have confirmed this action');
	},
	confirm_cancel_callback: function() {
		alert('you have cancelled this action');
	}
});
Show Confirm Modaal

Instagram

Loads an embedded Instagram photo into a Modaal window. In the example below we're using inline data-modaal- attributes to set the type and unique photo ID.

HTML<a href="#ig" class="modaal" data-modaal-type="instagram" data-modaal-instagram-id="BAGj2JqHFV6">Show</a>
Show Instagram Modaal
Download from Github
Download from Github