-
Notifications
You must be signed in to change notification settings - Fork 210
/
Copy pathindex.html
107 lines (89 loc) · 4.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Modal - Modals built out of pure CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link to the built CSS -->
<link rel="stylesheet" href="test/modal.css">
<!--[if lt IE 9]>
<script src="test/lib/html5shiv.js"></script>
<script src="test/lib/jquery.js"></script>
<![endif]-->
</head>
<body>
<div class="content">
<h1>CSS Modal</h1>
<p>Please check out the website for more information on how to use the modal.</p>
<h2>Examples</h2>
<!-- Call the modal by clicking this link -->
<ul>
<li><a href="#modal-show">Demo Show</a></li>
<li><a href="#modal-fade">Demo Fade</a></li>
<li><a href="#modal-zoomin">Demo ZoomIn</a></li>
<li><a href="#modal-plainscreen">Demo PlainScreen</a></li>
<li><a href="#modal-html5video">Demo HTML5Video</a></li>
<li><a href="#modal-iframe">Demo Iframe</a></li>
<li><a href="#modal-iframe-content">Demo Iframe in content</a></li>
<li><a href="#modal-image">Demo Image</a></li>
<li><a href="#modal-image2">Demo Image 2</a></li>
<li><a href="#modal-max-width">Maximum width</a></li>
<li><a href="#modal-max-width-2">Maximum width 2</a></li>
<li><a href="#modal-stretch">Stretched height</a></li>
<li><a href="#modal-gallery">Demo Gallery (with captions, also with video)</a></li>
<li><a href="#modal-gallery-boring/1">Demo Gallery (2nd image active)</a></li>
<li><a href="#modal-show" data-cssmodal-nohash>No-Hash</a></li>
<li><a href="#modal-show"><img src="" alt="test"></a></li>
<li><a href="#modal-stackable">Stackable modal</a></li>
</ul>
<p>Disrupt brunch keffiyeh chillwave Williamsburg. Excepteur food truck thundercats voluptate ethical, whatever in craft beer leggings proident Vice pour-over polaroid. Terry Richardson hoodie Truffaut Wes Anderson kale chips, synth nostrud elit sint id cillum bespoke. Semiotics synth Cosby sweater brunch beard, lo-fi esse Godard Echo Park sapiente mollit wayfarers. Cillum lomo cliche, YOLO Cosby sweater fixie tumblr eu umami Schlitz assumenda culpa. Chillwave church-key plaid, labore nulla flannel kogi Tonx single-origin coffee cred ex sustainable. Mlkshk ennui polaroid post-ironic sunt, keytar semiotics sriracha fashion axe labore church-key art party.</p>
<p>McSweeney's ex hashtag, officia beard id voluptate authentic gluten-free fingerstache 90's incididunt keytar butcher. Et meggings put a bird on it, retro yr artisan VHS chillwave ethical fixie culpa cliche wolf organic. Salvia keffiyeh fap Odd Future. Skateboard duis shabby chic put a bird on it. Stumptown flannel Williamsburg sartorial, seitan locavore Wes Anderson typewriter cliche. Elit ea nesciunt, keffiyeh cliche quis put a bird on it. Aesthetic food truck consequat, pop-up do commodo letterpress cornhole proident beard whatever Godard.</p>
<p>Literally consequat squid, consectetur cred banjo leggings letterpress salvia incididunt semiotics Tonx. Carles et velit letterpress, kale chips quis labore delectus blue bottle irony nesciunt sed. Gastropub sartorial tote bag, non nostrud sriracha Cosby sweater typewriter pour-over lo-fi. Lomo 8-bit skateboard you probably haven't heard of them consequat freegan. Quis accusamus Marfa fanny pack single-origin coffee raw denim. Tumblr food truck ennui Tonx exercitation. Veniam flannel vegan leggings DIY.</p>
</div>
<script>
'use strict';
var templates = [
'fade',
'gallery-2',
'gallery',
'html5-video',
'iframe-content',
'iframe',
'images-2',
'images',
'max-width-2',
'max-width',
'plainscreen',
'show',
'stackable',
'stretch',
'zoom-in'
];
var i = 0;
var get = function (url, callback) {
var onload = function () {
callback(this.responseText);
};
var request = new XMLHttpRequest();
request.onload = onload;
request.open("get", url, true);
request.send();
};
var append = function (template) {
var element = document.createElement('div');
element.innerHTML = template;
document.body.appendChild(element);
};
for (; i < templates.length; i++) {
get('examples/' + templates[i] + '.html', append);
}
</script>
<!-- JS for Modal -->
<script src="modal.js"></script>
<!-- Plugins -->
<script src="plugins/modal-html5video.js"></script>
<script src="plugins/modal-maxwidth.js"></script>
<script src="plugins/modal-resize.js"></script>
<script src="plugins/modal-gallery.js"></script>
</body>
</html>