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();

If you would prefer your trigger element is not an <a href="#">, you can define a `content_source` value like so:

HTML<button class="inline">Show</button>
<div id="inline" style="display:none;">
	Inline content goes here...
</div>

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

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
});

AJAX

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

HTML<a href="content.php" class="modaal-ajax">Show</a>

JS$('.modaal-ajax').modaal({
    type: 'ajax'
});

If you would prefer your ajax trigger element is not an <a href="#">, you can define an ajax supported `content_source` value like so:

HTML<button class="inline">Show</button>

JS$(".inline").modaal({
    content_source: '/path/to/file.html'
});

Single Image Modal

Opens a single image.
Label below opened image, as well as accessible label can be applied by using data-modaal-desc="My Image Description"

HTML<a href="path/to/image.jpg" class="image" data-modaal-desc="My Description">Show</a>

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

Show Single Image

For image (and gallery) instances where a non <a href="#"> is desired, a data-modaal-content-source attribute is required, instead of it being declared as a javascript option. For example:

HTML<button data-modaal-content-source="path/to/image.jpg" class="image">Show</button>

Image Gallery

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

HTML<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>

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

Show Gallery Image 1 Show Gallery Image 4 Show Gallery Image 2 Show Gallery Image 3

For image gallery instances where a non <a href="#"> is desired, a data-modaal-content-source attribute is required, instead of it being declared as a javascript option. For example:

HTML<button data-group="gallery" data-modaal-content-source="path/to/image-1.jpg" class="image">Show</button>
<button data-group="gallery" data-modaal-content-source="path/to/image-2.jpg" class="image">Show</button>

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'
});

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
});

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');
	}
});

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>