-
Notifications
You must be signed in to change notification settings - Fork 183
/
index.html
437 lines (357 loc) · 30 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!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"><button></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><a href="#inline" <span>data-modaal-type</span>="inline" <span>data-modaal-animation</span>="fade" class="modaal">Show</a></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><a href="#inline" class="inline">Show</a>
<div id="inline">
Inline content goes here...
</div></pre>
<pre><strong>JS</strong>$(".inline").modaal();</pre>
<p>If you would prefer your trigger element is not an <span class="inline-code"><a href="#"></span>, you can define a `content_source` value like so:</p>
<pre><strong>HTML</strong><button class="inline">Show</button>
<div id="inline" style="display:none;">
Inline content goes here...
</div></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><a href="content.php" class="modaal-ajax">Show</a></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"><a href="#"></span>, you can define an ajax supported `content_source` value like so:</p>
<pre><strong>HTML</strong><button class="inline">Show</button></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><a href="path/to/image.jpg" class="image" data-modaal-desc="My Description">Show</a></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"><a href="#"></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><button data-modaal-content-source="path/to/image.jpg" class="image">Show</button></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><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></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"><a href="#"></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><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></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><a href="https://player.vimeo.com/video/142216434" class="video">Show</a></pre>
<pre><strong>JS</strong>$('.video').modaal({
type: 'video'
});</pre>
<a href="https://player.vimeo.com/video/142216434?color=ffffff&title=0&byline=0&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><a href="http://humaan.com" class="iframe">Show</a></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><a href="javascript:void(0);" class="confirm">Show</a></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: '<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');
}
});</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><a href="#ig" class="modaal" data-modaal-type="instagram" data-modaal-instagram-id="BAGj2JqHFV6">Show</a></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>