/
index.html
96 lines (80 loc) · 4.46 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
<!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 CSS -->
<link rel="stylesheet" href="test/modal.css">
<link rel="stylesheet" href="bin/index.css">
<!-- JS for Modal -->
<script src="bin/index.js" defer></script>
<script src="bin/plugins.js" defer></script>
</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-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>
(function () {
var templates = [
'fade',
'gallery-2',
'gallery',
'html5-video',
'iframe-content',
'iframe',
'images-2',
'images',
'max-width-2',
'max-width',
'show',
'stackable',
'stretch',
];
var i = 0;
var get = function (url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200){
callback(this.responseText);
}
};
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>
</body>
</html>