forked from drublic/css-modal
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (132 loc) · 7.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Modal - Modals build out of pure CSS</title>
<meta name="viewport" content="width=device-width">
<!-- Link to the built CSS -->
<link rel="stylesheet" href="tests/modal.css">
<style>
.content {
max-width: 400px;
}
</style>
</head>
<body>
<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" title="Clicking this link shows the modal">Demo Show</a></li>
<li><a href="#modal-fade" title="Clicking this link shows the modal">Demo Fade</a></li>
<li><a href="#modal-zoomin" title="Clicking this link shows the modal">Demo ZoomIn</a></li>
<li><a href="#modal-plainscreen" title="Clicking this link shows the modal">Demo PlainScreen</a></li>
<li><a href="#modal-zoomout" title="Clicking this link shows the modal">Demo ZoomOut</a></li>
<li><a href="#modal-slidefromtop" title="Clicking this link shows the modal">Demo slideFromTop</a></li>
<li><a href="#modal-bouncefromtop" title="Clicking this link shows the modal">Demo bounceFromTop</a></li>
<li><a href="#modal-bouncefromtopshaky" title="Clicking this link shows the modal">Demo bounceFromTopShaky</a></li>
</ul>
<!-- A modal with its content -->
<section class="modal--show" id="modal-show"
tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-show">A modal</h2>
</header>
<div class="modal-content">
<p>Content.</p>
<p><a href="#stackable">Stackable Modal</a></p>
<p>Fap raw denim Marfa, eu lomo artisan jean shorts. Next level YOLO biodiesel PBR. Irure farm-to-table cardigan, culpa helvetica nostrud nulla messenger bag. Leggings gentrify iPhone dreamcatcher dolor. Butcher PBR est scenester McSweeney's, retro et single-origin coffee vegan irony. Dolore twee wayfarers beard yr mlkshk biodiesel, art party sint gastropub eiusmod fixie. Banksy sed DIY put a bird on it gentrify raw denim, art party vero keffiyeh cred aesthetic.</p>
</div>
<footer>
<p>Footer</p>
</footer>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--show" id="stackable"
tabindex="-1" role="dialog" aria-labelledby="stackable-label" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="stackable-label">Stacked modal</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--fade" id="modal-fade"
tabindex="-1" role="dialog" aria-labelledby="label-fade" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="label-fade">A fading modal</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--zoomin" id="modal-zoomin"
tabindex="-1" role="dialog" aria-labelledby="label-zoomin" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="label-zoomin">A zoomed in modal</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--plainscreen" id="modal-plainscreen"
tabindex="-1" role="dialog" aria-labelledby="modal-plainscreen" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="modal-plainscreen">A plain screen modal</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--zoomout" id="modal-zoomout"
tabindex="-1" role="dialog" aria-labelledby="label-zoomout" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-zoomout">A zoomed out modal</h2>
</header>
<div class="modal-content">
<p>Content.</p>
</div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--slidefromtop" id="modal-slidefromtop"
tabindex="-1" role="dialog" aria-labelledby="label-slidefromtop" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="label-slidefromtop">A modal that slides from the top</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--bouncefromtop" id="modal-bouncefromtop"
tabindex="-1" role="dialog" aria-labelledby="label-bouncefromtop" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="label-bouncefromtop">A modal that bounces from the top</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<section class="modal--bouncefromtopshaky" id="modal-bouncefromtopshaky"
tabindex="-1" role="dialog" aria-labelledby="label-bouncefromtopshaky" aria-hidden="true">
<div class="modal-inner">
<header><h2 id="label-bouncefromtopshaky">A modal that bounces shakey from the top</h2></header>
<div class="modal-content"><p>Content.</p></div>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal" data-close="Close">×</a>
</section>
<div class="content">
<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 src="modal.js"></script><!-- JS for Modal -->
</body>
</html>