index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<title>Modaal is a WCAG 2.0 Level AA accessible modal plugin</title>

	<!-- Demo Styles -->
	<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="demo/css/demo.css?t=1462179764" media="screen">

	<!-- Modaal Styles -->
	<link rel="stylesheet" href="source/css/modaal.css" media="screen">

	<!-- Made by Humaan http://humaan.com @wearehumaan -->

	<link rel="shortcut icon" href="demo/favicon.ico" type="image/x-icon">
	<link rel="icon" href="demo/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" href="demo/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="demo/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="demo/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="144x144" href="demo/apple-touch-icon-144x144.png">

	<meta name="description" content="Modaal - An accessible dialog window plugin for all humans by @wearehumaan"/>
	<meta name="robots" content="noodp"/>
	<link rel="canonical" href="http://www.humaan.com/modaal" />

	<meta property="og:locale" content="en_US" />
	<meta property="og:type" content="article" />
	<meta property="og:title" content="Modaal - A WCAG 2.0 Level AA accessible modal plugin by @wearehumaan" />
	<meta property="og:url" content="http://www.humaan.com/modaal/" />
	<meta property="og:site_name" content="Modaal: WCAG 2.0 Level AA accessible modal plugin" />
	<meta property="og:image" content="http://www.humaan.com/modaal/demo/social-share-modaal.png" />

	<meta name="twitter:card" content="summary"/>
	<meta name="twitter:title" content="Modaal - A WCAG 2.0 Level AA accessible modal plugin by @wearehumaan"/>
	<meta name="twitter:site" content="@wearehumaan"/>
	<meta name="twitter:image" content="http://www.humaan.com/modaal/demo/social-share-modaal.png"/>
	<meta name="twitter:creator" content="@wearehumaan"/>

	<!-- Google Analytics -->
	<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		ga('create', 'UA-22985555-46', 'humaan.com');
		ga('send', 'pageview');
	</script>

</head>
<body>
	<header class="modaal-header">
		<h1><svg class="modaal-logo" viewBox="0 0 108.256 32.294">
				<path d="M9.596,14.185l-4.83-9.509C4.68,4.513,4.592,4.386,4.502,4.296c-0.09-0.09-0.191-0.156-0.303-0.199 c-0.112-0.043-0.238-0.064-0.38-0.064s-0.307,0-0.496,0H0v18.715h3.838V11.976c0-0.248-0.009-0.521-0.026-0.816 c-0.017-0.296-0.043-0.593-0.077-0.893l4.998,9.64c0.155,0.3,0.363,0.527,0.625,0.681c0.262,0.154,0.56,0.231,0.895,0.231h0.592 c0.335,0,0.633-0.077,0.895-0.231c0.262-0.154,0.47-0.381,0.625-0.681l4.972-9.627c-0.052,0.609-0.077,1.174-0.077,1.697v10.771 h3.838V4.032h-3.323c-0.189,0-0.354,0-0.496,0c-0.142,0-0.268,0.022-0.38,0.064c-0.112,0.043-0.213,0.109-0.303,0.199 c-0.09,0.09-0.178,0.216-0.264,0.379l-4.817,9.47c-0.172,0.335-0.339,0.68-0.502,1.036c-0.163,0.356-0.318,0.723-0.464,1.1 c-0.146-0.369-0.298-0.729-0.457-1.081C9.933,14.85,9.768,14.511,9.596,14.185L9.596,14.185z"/>
				<path d="M41.498,18.991c-0.467-1.162-1.124-2.17-1.971-3.024c-0.848-0.854-1.869-1.527-3.063-2.018 c-1.194-0.491-2.519-0.737-3.975-0.737c-1.456,0-2.783,0.243-3.981,0.73c-1.199,0.487-2.224,1.158-3.076,2.012 c-0.852,0.854-1.511,1.863-1.978,3.025c-0.467,1.162-0.7,2.418-0.7,3.768c0,1.35,0.233,2.606,0.7,3.768 c0.467,1.162,1.126,2.172,1.978,3.031c0.852,0.859,1.877,1.531,3.076,2.018c1.199,0.487,2.526,0.73,3.981,0.73 c1.455,0,2.781-0.244,3.975-0.73c1.194-0.487,2.215-1.16,3.063-2.018c0.848-0.859,1.505-1.869,1.971-3.031 c0.467-1.162,0.7-2.418,0.7-3.768C42.198,21.405,41.965,20.153,41.498,18.991z M37.395,25.252c-0.24,0.739-0.584,1.365-1.034,1.878 c-0.45,0.513-1,0.903-1.65,1.173c-0.651,0.269-1.391,0.404-2.222,0.404c-0.839,0-1.586-0.135-2.241-0.404 c-0.655-0.269-1.207-0.66-1.657-1.173c-0.45-0.513-0.794-1.138-1.034-1.878c-0.24-0.739-0.36-1.574-0.36-2.505 c0-0.923,0.12-1.754,0.36-2.493c0.24-0.739,0.584-1.365,1.034-1.877c0.449-0.513,1.002-0.906,1.657-1.179 c0.655-0.273,1.402-0.41,2.241-0.41c0.83,0,1.571,0.137,2.222,0.41c0.651,0.274,1.201,0.666,1.65,1.179 c0.45,0.513,0.794,1.139,1.034,1.877c0.24,0.739,0.36,1.57,0.36,2.493C37.754,23.678,37.634,24.513,37.395,25.252z"/>
				<path d="M60.901,12.175c-0.468-1.146-1.126-2.135-1.976-2.967c-0.85-0.832-1.873-1.485-3.07-1.957 c-1.197-0.472-2.525-0.708-3.984-0.708h-7.286v18.757h7.286c1.459,0,2.787-0.234,3.984-0.702c1.197-0.468,2.221-1.12,3.07-1.957 c0.85-0.837,1.508-1.828,1.976-2.974c0.468-1.146,0.702-2.396,0.702-3.753C61.603,14.567,61.369,13.32,60.901,12.175z M56.788,18.438c-0.24,0.747-0.586,1.38-1.036,1.899c-0.451,0.519-1.002,0.918-1.654,1.197c-0.652,0.279-1.395,0.418-2.227,0.418 h-2.909V9.89h2.909c0.832,0,1.575,0.14,2.227,0.418c0.652,0.279,1.204,0.678,1.654,1.197c0.451,0.519,0.796,1.152,1.036,1.899 c0.24,0.747,0.36,1.583,0.36,2.51C57.149,16.85,57.028,17.691,56.788,18.438z"/>
				<path d="M74.582,1.772h-4.454l-7.261,18.757h3.399c0.36,0,0.665-0.097,0.914-0.29c0.249-0.193,0.416-0.41,0.502-0.65l1.107-3.27 c0,0,5.251,0.009,6.623,0.009c0.124,0,0.362-0.097,0.474-0.374c0.415-1.026,1.569-3.935,2.003-4.928 c0.09-0.206,0.101-0.449-0.027-0.782C77.176,8.455,74.582,1.772,74.582,1.772z M71.518,8.247c0.129-0.326,0.266-0.712,0.412-1.159 c0.146-0.446,0.287-0.931,0.425-1.455c0.146,0.515,0.294,0.993,0.444,1.435c0.15,0.442,0.281,0.826,0.393,1.152l1.725,5.136h-5.124 L71.518,8.247z"/>
				<path d="M86.955,7.276h-4.454L75.24,26.033h3.399c0.36,0,0.665-0.097,0.914-0.29c0.249-0.193,0.416-0.41,0.502-0.65l1.107-3.27 h7.132l1.107,3.27c0.094,0.275,0.264,0.5,0.508,0.676c0.245,0.176,0.556,0.264,0.933,0.264h3.373L86.955,7.276z M83.891,13.752 c0.129-0.326,0.266-0.712,0.412-1.159c0.146-0.446,0.287-0.931,0.425-1.455c0.146,0.515,0.294,0.993,0.444,1.435 c0.15,0.442,0.281,0.826,0.393,1.152l1.725,5.136h-5.124L83.891,13.752z"/>
				<path d="M99.24,0h-4.38v19.261h13.396v-3.467H99.24V0z"/>
</svg><span class="ui-hidden">Modaal</span></h1>
		<p>An accessible dialog window plugin for all humans.</p>
		<a href="https://github.com/humaan/Modaal" target="_blank" class="btn btn-download">Download from Github</a>
		<a href="#inline-content" class="btn modaal main-example" data-modaal-type="inline">View Example</a>
		<div class="version" aria-label="Version 0.4.4">v0.4.4</div>
		<a href="http://www.humaan.com" target="_blank" class="humaan-project">A Humaan project</a>

		<div class="share">
			<a href="javascript:void 0" class="social-share share-fb" onclick="return addthis_sendto('facebook');"><span class="ui-hidden">Share on Facebook</span></a>
			<a href="javascript:void 0" class="social-share share-tw" onclick="return addthis_sendto('twitter');"><span class="ui-hidden">Share on Twitter</span></a>
			<a href="javascript:void 0" class="social-share share-other" onclick="return addthis_sendto('more');"><span class="ui-hidden">Share this page</span></a>
		</div>

		<a href="#overview-copy" class="scroll-trigger">
			<div class="scroll-arrow"></div>
			<span class="ui-hidden">Scroll to content</span>
		</a>

	</header>
	<section class="modaal-examples">

		<div class="overview-copy" id="overview-copy">
			<div class="container">
				<p>Modaal is a WCAG 2.0 Level AA accessible modal window plugin.</p>

				<h2 class="highlight">Why another modal plugin?</h2>
				<p>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.</p>
			</div>
		</div>
		<div class="container">

			<div class="overview">
				<h2 class="highlight">Accessibility Features</h2>
				<ul>
					<li>WCAG 2.0 Level AA Support</li>
					<li>Saving page focusing state on modal open</li>
					<li>Switching focus state to new content on modal open</li>
					<li>Switch focus back to original focus state on modal close (eg. button clicked)</li>
					<li>Maintained tab scope to modal content</li>
					<li>ARIA support and customisation for modal title</li>
					<li>Keyboard control for closing an open modal</li>
					<li>Keyboard control for gallery next and previous</li>
					<li>Default color contrast support optimised for readability</li>
					<li>Accessible <span class="inline-code">&lt;button&gt;</span> close element with ARIA attribute</li>
					<li>Optimised for assistive technologies and screen readers</li>
				</ul>

				<h2 class="highlight">Other Features</h2>
				<ul>
					<li>Fully responsive, scaling with browser width.</li>
					<li>Modal types include inline content, ajax, image and image gallery, iframe, confirmation and Instagram photo.</li>
					<li>Customisable CSS with SASS options</li>
					<li>Inline attribute configuration support</li>
					<li>Full-screen/viewport mode</li>
					<li>Flexible opan and close options and methods</li>
					<li>Callback events for before and after open and close</li>
					<li>Callback events for before and after image change in gallery.</li>
				</ul>

				<div class="clearboth"></div>

			</div>
		</div>

		<div class="examples-wrap-outer">
		<div class="examples-wrap">
			<div class="container">

				<h2 class="highlight">Modaal Examples</h2>

				<div class="modaal-example example-no-brdr">
					<h2>Inline Attribute Configuration</h2>
					<p>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 <span class="inline-code">data-option-name</span> attribute support.</p>
					<p>To enable this, the Modaal trigger link must have a class of <span class="inline-code">modaal</span>, then you can add attributes to the link as needed like so:</p>

					<pre><strong>HTML</strong>&lt;a href="#inline" <span>data-modaal-type</span>="inline" <span>data-modaal-animation</span>="fade" class="modaal"&gt;Show&lt;/a&gt;</pre>

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

					<a href="#inline-content" data-modaal-type="inline" data-modaal-animation="fade" data-modaal-accessible-title="Inline Dialog Window" class="btn modaal">Show <span class="ui-hidden">Inline</span> Modaal</a>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Inline Content</h2>
					<p>Fetches content from an existing element (using an ID) in the page and loads it into the content.</p>

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

					<p>If you would prefer your trigger element is not an <span class="inline-code">&lt;a href="#"&gt;</span>, you can define a `content_source` value like so:</p>

					<pre><strong>HTML</strong>&lt;button class="inline"&gt;Show&lt;/button&gt;
&lt;div id="inline" style="display:none;"&gt;
	Inline content goes here...
&lt;/div&gt;</pre>
					<pre><strong>JS</strong>$(".inline").modaal({
    content_source: '#inline'
});</pre>

					<a href="#inline-content" class="btn modaal-inline-content">Show <span class="ui-hidden">Inline</span> Modaal</a>
					<div id="inline-content" class="hidden">
						<h2>Inline Modal Content</h2>
						<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, <a href="http://google.com" target="_blank">porttitor eu</a>, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
						<p>Quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. <a href="http://humaan.com" target="_blank">Cras ultricies mi eu turpis</a> hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing.</p>
						<form action="/" class="demo-form">
							<p><label for="name">Input Label</label><br />
								<input name="name" id="name" autocomplete="on"></p>
							<p><input type="checkbox" name="fieldInput1" id="fieldInput1"><label for="fieldInput1">Label</label></p>
							<p><input type="checkbox" name="fieldInput2" id="fieldInput2"><label for="fieldInput2">Label 2</label></p>
							<p><input type="checkbox" name="fieldInput3" id="fieldInput3"><label for="fieldInput3">Label 3</label></p>
							<span style="display:none;"><button type="submit">Submit</button></span>
						</form>
						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. <a href="http://www.nytimes.com/" target="_blank">Phasellus consectetuer vestibulum elit.</a> Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat augue.</p>
					</div>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Fullscreen Mode</h2>
					<p>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.</p>
					<p>Fullscreen mode works best with inline and ajax based modals only. Currently no support for fullscreen images.</p>

					<pre><strong>JS</strong>$('.fullscreen').modaal({
    fullscreen: true
});</pre>

					<a href="#inline-content" class="btn fullscreen">Show <span class="ui-hidden">Fullscreen</span> Modaal</a>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>AJAX</h2>
					<p>Loads content via AJAX into the Modaal window based on the link href attribute.</p>

					<pre><strong>HTML</strong>&lt;a href="content.php" class="modaal-ajax"&gt;Show&lt;/a&gt;</pre>
					<pre><strong>JS</strong>$('.modaal-ajax').modaal({
    type: 'ajax'
});</pre>
					<p>If you would prefer your ajax trigger element is not an <span class="inline-code">&lt;a href="#"&gt;</span>, you can define an ajax supported `content_source` value like so:</p>

					<pre><strong>HTML</strong>&lt;button class="inline"&gt;Show&lt;/button&gt;</pre>
					<pre><strong>JS</strong>$(".inline").modaal({
    content_source: '/path/to/file.html'
});</pre>

					<a href="demo/ajax-content.html" class="btn modaal-ajax">Show <span class="ui-hidden">Ajax</span> Modaal</a>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Single Image Modal</h2>
					<p>Opens a single image.<br />
					Label below opened image, as well as accessible label can be applied by using <span class="inline-code">data-modaal-desc="<span>My Image Description</span>"</span></p>

					<pre><strong>HTML</strong>&lt;a href="path/to/image.jpg" class="image" data-modaal-desc="My Description"&gt;Show&lt;/a&gt;</pre>
					<pre><strong>JS</strong>$('.image').modaal({
    type: 'image'
});</pre>

					<p><a href="demo/img/temp/gallery-1.jpg" class="modaal-image gallery-thumb" data-modaal-desc="My Description"><span class="ui-hidden">Show Single Image</span><img src="demo/img/temp/gallery-thumb-1.jpg" alt="Thumbnail for single image"></a></p>

					<p>For image (and gallery) instances where a non <span class="inline-code">&lt;a href="#"&gt;</span> is desired, a <span>data-modaal-content-source</span> attribute <strong>is</strong> required, instead of it being declared as a javascript option. For example:</p>

					<pre><strong>HTML</strong>&lt;button data-modaal-content-source="path/to/image.jpg" class="image"&gt;Show&lt;/button&gt;</pre>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Image Gallery</h2>
					<p>Opens a series of images linked by a <span class="inline-code">data-group="<span>group-name</span>"</span> attribute. Replace <span class="inline-code"><span>group-name</span></span> with what your gallery group identifier.</p>

					<pre><strong>HTML</strong>&lt;a href="path/to/image-1.jpg" data-group="gallery" class="gallery"&gt;Show&lt;/a&gt;
&lt;a href="path/to/image-2.jpg" data-group="gallery" class="gallery"&gt;Show&lt;/a&gt;
&lt;a href="path/to/image-3.jpg" data-group="gallery" class="gallery"&gt;Show&lt;/a&gt;</pre>
					<pre><strong>JS</strong>$('.gallery').modaal({
    type: 'image'
});</pre>

					<p>
						<a href="demo/img/temp/gallery-1.jpg" data-group="gallery" class="modaal-image gallery-thumb" data-modaal-desc="Test image for modal gallery"><span class="ui-hidden">Show Gallery Image 1</span><img src="demo/img/temp/gallery-thumb-1.jpg" alt="Thumbnail for Gallery Image 1"></a>
						<a href="demo/img/temp/gallery-4.jpg" data-group="gallery" class="modaal-image gallery-thumb" data-modaal-desc="Another description"><span class="ui-hidden">Show Gallery Image 4</span><img src="demo/img/temp/gallery-thumb-4.jpg" alt="Thumbnail for Gallery Image 4"></a>
						<a href="demo/img/temp/gallery-2.jpg" data-group="gallery" class="modaal-image gallery-thumb" data-modaal-desc="Another description"><span class="ui-hidden">Show Gallery Image 2</span><img src="demo/img/temp/gallery-thumb-2.jpg" alt="Thumbnail for Gallery Image 2"></a>
						<a href="demo/img/temp/gallery-3.jpg" data-group="gallery" class="modaal-image gallery-thumb"><span class="ui-hidden">Show Gallery Image 3</span><img src="demo/img/temp/gallery-thumb-3.jpg" alt="Thumbnail for Gallery Image 3"></a>
					</p>

					<p>For image gallery instances where a non <span class="inline-code">&lt;a href="#"&gt;</span> is desired, a <span>data-modaal-content-source</span> attribute <strong>is</strong> required, instead of it being declared as a javascript option. For example:</p>

					<pre><strong>HTML</strong>&lt;button data-group="gallery" data-modaal-content-source="path/to/image-1.jpg" class="image"&gt;Show&lt;/button&gt;
&lt;button data-group="gallery" data-modaal-content-source="path/to/image-2.jpg" class="image"&gt;Show&lt;/button&gt;</pre>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Video</h2>
					<p>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.</p>

					<pre><strong>HTML</strong>&lt;a href="https://player.vimeo.com/video/142216434" class="video"&gt;Show&lt;/a&gt;</pre>
					<pre><strong>JS</strong>$('.video').modaal({
	type: 'video'
});</pre>
					<a href="https://player.vimeo.com/video/142216434?color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0" class="btn modaal-video">Show <span class="ui-hidden">Video</span> Modaal</a>


					<h3 class="highlight">Video Modaal Tips</h3>
					<p>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.</p>
					<p><span class="inline-code start-row">https://www.youtube.com/embed/cBJyo0tgLnw</span> 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.</p>
					<p><span class="inline-code start-row">https://player.vimeo.com/video/109626219</span> 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 <span class="inline-code">src=""</span>.</p>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>iframe</h2>
					<p>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.</p>

					<pre><strong>HTML</strong>&lt;a href="http://humaan.com" class="iframe"&gt;Show&lt;/a&gt;</pre>
					<pre><strong>JS</strong>$('.iframe').modaal({
	type: 'iframe',
	width: 700,
	height: 500
});</pre>
					<a href="http://humaan.com" class="btn modaal-iframe">Show <span class="ui-hidden">iFrame</span> Modaal</a>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Confirmation Modaal</h2>
					<p>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).</p>

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

					<a href="javascript:void(0);" class="btn modaal-confirm">Show <span class="ui-hidden">Confirm</span> Modaal</a>
				</div><!-- .modaal-example -->

				<div class="modaal-example">
					<h2>Instagram</h2>
					<p>Loads an embedded Instagram photo into a Modaal window. In the example below we're using inline <span class="inline-code">data-modaal-</span> attributes to set the type and unique photo ID.</p>

					<pre><strong>HTML</strong>&lt;a href="#ig" class="modaal" data-modaal-type="instagram" data-modaal-instagram-id="BAGj2JqHFV6"&gt;Show&lt;/a&gt;</pre>

					<a href="javascript:void 0" class="btn modaal" data-modaal-type="instagram" data-modaal-instagram-id="BAGj2JqHFV6">Show <span class="ui-hidden">Instagram</span> IG Image #1</a>
					<a href="javascript:void 0" class="btn modaal" data-modaal-type="instagram" data-modaal-instagram-id="Bj8oY8sDG-1">Show <span class="ui-hidden">Instagram</span> IG Image #2</a>

				</div><!-- .modaal-example -->

				<div class="clearboth"></div>
			</div>

		</div>
		</div>
	</section>

	<section class="container page-wrap">
		<a href="https://github.com/humaan/Modaal" target="_blank" class="btn btn-download">Download from Github</a>
	</section>

	<!-- Fixed Header - Revealed on Scroll -->
	<div class="modaal-fixed-header">
		<div class="fixed-logo"><svg class="modaal-logo" viewBox="0 0 108.256 32.294">
				<path d="M9.596,14.185l-4.83-9.509C4.68,4.513,4.592,4.386,4.502,4.296c-0.09-0.09-0.191-0.156-0.303-0.199 c-0.112-0.043-0.238-0.064-0.38-0.064s-0.307,0-0.496,0H0v18.715h3.838V11.976c0-0.248-0.009-0.521-0.026-0.816 c-0.017-0.296-0.043-0.593-0.077-0.893l4.998,9.64c0.155,0.3,0.363,0.527,0.625,0.681c0.262,0.154,0.56,0.231,0.895,0.231h0.592 c0.335,0,0.633-0.077,0.895-0.231c0.262-0.154,0.47-0.381,0.625-0.681l4.972-9.627c-0.052,0.609-0.077,1.174-0.077,1.697v10.771 h3.838V4.032h-3.323c-0.189,0-0.354,0-0.496,0c-0.142,0-0.268,0.022-0.38,0.064c-0.112,0.043-0.213,0.109-0.303,0.199 c-0.09,0.09-0.178,0.216-0.264,0.379l-4.817,9.47c-0.172,0.335-0.339,0.68-0.502,1.036c-0.163,0.356-0.318,0.723-0.464,1.1 c-0.146-0.369-0.298-0.729-0.457-1.081C9.933,14.85,9.768,14.511,9.596,14.185L9.596,14.185z"/>
				<path d="M41.498,18.991c-0.467-1.162-1.124-2.17-1.971-3.024c-0.848-0.854-1.869-1.527-3.063-2.018 c-1.194-0.491-2.519-0.737-3.975-0.737c-1.456,0-2.783,0.243-3.981,0.73c-1.199,0.487-2.224,1.158-3.076,2.012 c-0.852,0.854-1.511,1.863-1.978,3.025c-0.467,1.162-0.7,2.418-0.7,3.768c0,1.35,0.233,2.606,0.7,3.768 c0.467,1.162,1.126,2.172,1.978,3.031c0.852,0.859,1.877,1.531,3.076,2.018c1.199,0.487,2.526,0.73,3.981,0.73 c1.455,0,2.781-0.244,3.975-0.73c1.194-0.487,2.215-1.16,3.063-2.018c0.848-0.859,1.505-1.869,1.971-3.031 c0.467-1.162,0.7-2.418,0.7-3.768C42.198,21.405,41.965,20.153,41.498,18.991z M37.395,25.252c-0.24,0.739-0.584,1.365-1.034,1.878 c-0.45,0.513-1,0.903-1.65,1.173c-0.651,0.269-1.391,0.404-2.222,0.404c-0.839,0-1.586-0.135-2.241-0.404 c-0.655-0.269-1.207-0.66-1.657-1.173c-0.45-0.513-0.794-1.138-1.034-1.878c-0.24-0.739-0.36-1.574-0.36-2.505 c0-0.923,0.12-1.754,0.36-2.493c0.24-0.739,0.584-1.365,1.034-1.877c0.449-0.513,1.002-0.906,1.657-1.179 c0.655-0.273,1.402-0.41,2.241-0.41c0.83,0,1.571,0.137,2.222,0.41c0.651,0.274,1.201,0.666,1.65,1.179 c0.45,0.513,0.794,1.139,1.034,1.877c0.24,0.739,0.36,1.57,0.36,2.493C37.754,23.678,37.634,24.513,37.395,25.252z"/>
				<path d="M60.901,12.175c-0.468-1.146-1.126-2.135-1.976-2.967c-0.85-0.832-1.873-1.485-3.07-1.957 c-1.197-0.472-2.525-0.708-3.984-0.708h-7.286v18.757h7.286c1.459,0,2.787-0.234,3.984-0.702c1.197-0.468,2.221-1.12,3.07-1.957 c0.85-0.837,1.508-1.828,1.976-2.974c0.468-1.146,0.702-2.396,0.702-3.753C61.603,14.567,61.369,13.32,60.901,12.175z M56.788,18.438c-0.24,0.747-0.586,1.38-1.036,1.899c-0.451,0.519-1.002,0.918-1.654,1.197c-0.652,0.279-1.395,0.418-2.227,0.418 h-2.909V9.89h2.909c0.832,0,1.575,0.14,2.227,0.418c0.652,0.279,1.204,0.678,1.654,1.197c0.451,0.519,0.796,1.152,1.036,1.899 c0.24,0.747,0.36,1.583,0.36,2.51C57.149,16.85,57.028,17.691,56.788,18.438z"/>
				<path d="M74.582,1.772h-4.454l-7.261,18.757h3.399c0.36,0,0.665-0.097,0.914-0.29c0.249-0.193,0.416-0.41,0.502-0.65l1.107-3.27 c0,0,5.251,0.009,6.623,0.009c0.124,0,0.362-0.097,0.474-0.374c0.415-1.026,1.569-3.935,2.003-4.928 c0.09-0.206,0.101-0.449-0.027-0.782C77.176,8.455,74.582,1.772,74.582,1.772z M71.518,8.247c0.129-0.326,0.266-0.712,0.412-1.159 c0.146-0.446,0.287-0.931,0.425-1.455c0.146,0.515,0.294,0.993,0.444,1.435c0.15,0.442,0.281,0.826,0.393,1.152l1.725,5.136h-5.124 L71.518,8.247z"/>
				<path d="M86.955,7.276h-4.454L75.24,26.033h3.399c0.36,0,0.665-0.097,0.914-0.29c0.249-0.193,0.416-0.41,0.502-0.65l1.107-3.27 h7.132l1.107,3.27c0.094,0.275,0.264,0.5,0.508,0.676c0.245,0.176,0.556,0.264,0.933,0.264h3.373L86.955,7.276z M83.891,13.752 c0.129-0.326,0.266-0.712,0.412-1.159c0.146-0.446,0.287-0.931,0.425-1.455c0.146,0.515,0.294,0.993,0.444,1.435 c0.15,0.442,0.281,0.826,0.393,1.152l1.725,5.136h-5.124L83.891,13.752z"/>
				<path d="M99.24,0h-4.38v19.261h13.396v-3.467H99.24V0z"/>
</svg><span class="ui-hidden">Logo for Modaal</span></div>
		<a href="https://github.com/humaan/Modaal" target="_blank" class="btn">Download from Github</a>
	</div>


	<!-- jQuery CDN -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

	<script src="demo/js/demo.js"></script>

	<!-- Modaal -->
	<script src="source/js/modaal.js" type="text/javascript"></script>
	<script type="text/javascript">

		// Standard Modal
		$('.modaal-inline-content').modaal({
			type: 'inline',
			accessible_title: 'Modal title',
			before_open: function() {
				//console.log('log before open');
			},
			before_close: function() {
				//console.log('log before close');
			},
			after_open: function() {
				//console.log('log after open');
			},
			after_close: function() {
				//console.log('log after close');
			},
			should_open: function () {
				//console.log('just checking to see if we should open');
				return true;
			}
		});
		
		// Standard Modal
		$('.modaal-inline-content-source').modaal({
			content_source: '#inline-content'
		});

		// Ajax Modal
		$('.modaal-ajax').modaal({
			type: 'ajax'
		});

		// Confirm Modal
		// this will stay locked by default until actioned (ok/cancel)
		$('.modaal-confirm').modaal({
			type: 'confirm',
			accessible_title: 'Confirm modal title',
			confirm_button_text: 'Confirm',
			confirm_title: 'Confirm Title',
			confirm_content: '<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>',
			confirm_callback: function() {
				//console.log('log callback once confirmed');
			},
			confirm_cancel_callback: function() {
				console.log('cancel callback fired');
			}
		});

		// Single Image Modal
		$('.modaal-image').modaal({
			type: 'image',
			before_image_change: function( current, incoming ) {
				//console.log('change image from', current, incoming );
			},
			after_image_change: function( current ) {
				//console.log('image has changed to', current );
			}
		});

		// iFrame Modal
		$('.modaal-iframe').modaal({
			type: 'iframe',
			width: 1000,
			height: 800,
			accessible_title: 'iFrame modal title'
		});

		// Video Modal
		$('.modaal-video').modaal({
			type: 'video',
			accessible_title: 'Video modal title'
		});

		// Video Modal
		$('.fullscreen').modaal({
			fullscreen: true
		});

	</script>


	<!-- Add This -->
	<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-569c37cac02beb89" async="async"></script>

</body>
</html>