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

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.php" 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 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 1 Show Gallery Image 4 Show Gallery Image 2 Show 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 Show Video Modaal(YT)

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://g-mops.net/epica_notebook/index_youtube_mypagetest_spanishtest.html" 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