-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
386 lines (373 loc) · 21.2 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
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="//vk.com/tishukn">
<link rel="stylesheet" href="demo/prism.css">
<link rel="stylesheet" href="dest/unimodal.css">
<link rel="stylesheet" type="text/css" href="demo/style.css">
<meta name="description" content="Simple Vanilla Javascript Modal">
<title>Unimodal Demo</title>
</head>
<body><!--[if lte IE 9]>
<p class="browsehappy">Вы используете <strong>устаревший</strong> браузер. Пожалуйста <a href="//browsehappy.com/" target="_blank">обновите ваш браузер</a> чтобы воспользоваться всем функционалом сайта.</p><![endif]-->
<div class="container">
<div class="block text-center">
<div class="row">
<h1>Unimodal</h1>
<p>Simple Vanilla Javascript Modal</p>
</div>
<p><a href="//github.com/rainjeck/unimodal">GitHub</a></p>
</div>
<!-- .block-->
<div class="block wrap">
<ul>
<li>Universal</li>
<li>Simple</li>
<li>Style what you want</li>
<li>Hash support</li>
</ul>
</div>
<div class="block wrap">
<h3 class="row">Get started</h3>
<div class="row">
<p>Include css:</p>
<p>This is basic styles. You can change what you want and need.</p>
<pre class="language-markup"><code><link rel="stylesheet" href="unimodal.css">
</code></pre>
</div>
<div class="row">
<p>Include script:</p>
<pre class="language-markup"><code><script src="unimodal.min.js"></code></pre>
</div>
</div>
<!-- .block-->
<div class="block wrap">
<h3 class="row">Use</h3>
<div class="row">
<p>HTML:</p>
<pre class="language-markup"><code><!--
Important attributes:
- [data-unimodal] - modal element
- [data-unimodal-body] - modal body element
- [data-unimodal-close] - modal close button
-->
<!--- Open Modal Button -->
<a href="#!" data-unimodal-open="simple-modal">Open Modal</a>
<!--- Modal Markup -->
<div class="unimodal" id="simple-modal" data-unimodal>
<div class="unimodal-body" data-unimodal-body>
<button type="button" data-unimodal-close>Close</button>
<!--- Your Content Here -->
</div>
</div>
<!-- If you don't need close modal after click on overlay -->
<div data-unimodal data-unimodal-static> ... </div>
</code></pre>
</div>
<div class="row">
<p>Init:</p>
<pre class="language-javascript"><code>const modal = new Unimodal({
scrollWindow: false, /* enable or disable window scroll */
hash: false, /* hash support */
onOpen: ( modal, button ) => {
/* ... do your staff here ... */
},
onClose: modal => {
/* ... do your staff here ... */
}
});</code></pre>
</div>
<div class="row">
<p>Public Methods:</p>
<pre class="language-javascript"><code>/* Open Modal */
Unimodal.open('your-modal-id', () => {
/* ... your callback here ... */
});
/* Close Modal */
Unimodal.close('your-modal-id', () => {
/* ... your callback here ... */
});
/* OR */
modal.open('your-modal-id');
modal.close('your-modal-id');
/* Close Modals */
Unimodal.closeAll();</code></pre>
</div>
</div>
<!-- .block-->
<div class="block wrap">
<div class="block">
<div class="row">
<h3>Demo</h3>
</div>
<div class="row">
<p><a class="modalBtn" href="#!" data-unimodal-open="simple-modal">Open Modal</a></p>
</div>
<div class="row">
<p><a class="modalBtn" href="#!" data-unimodal-open="long-modal">Open Long Modal</a></p>
</div>
</div>
<div class="block">
<div class="row">
<p>Custom Button</p>
</div>
<div class="row">
<pre class="language-markup"><code><button type='button' id='custom-button'>Custom Modal</button></code></pre>
</div>
<div class="row">
<pre class="language-javascript"><code>const button = document.querySelector('#custom-button');
button.addEventListener('click', e => {
modal.open('custom-modal');
});</code></pre>
</div>
<div class="row">
<button class="modalBtn" id="custom-button" type="button">Custom Modal Button</button>
</div>
</div>
</div>
<!-- .block-->
<div class="block wrap">
<div class="row">
<h3>Recipe: Video</h3>
</div>
<div class="row">
<p>HTML:</p>
<pre class="language-markup"><code><!--- Button -->
<button type='button' data-unimodal-open='modal-video'>Open Modal</button>
<!--- Modal -->
<div class='unimodal' id='modal-video' data-unimodal></div>
<div class='unimodal-body' data-unimodal-body>
<button type='button' data-unimodal-close>Close</button>
<video controls>
<source src='video.mp4' type='video/mp4' />
Your browser does not support the video tag.
</video>
</div>
</div></code></pre>
</div>
<div class="row">
<p>JavaScript:</p>
<pre class="language-javascript"><code>const modal = new Unimodal({
onOpen: ( modal, button ) => {
if ( modal.id == 'modal-video' ) {
const video = modal.querySelector('video');
video.currentTime = 0;
video.play();
}
},
onClose: modal => {
if ( modal.id == 'modal-video' ) {
const video = modal.querySelector('video');
video.pause();
}
}
});</code></pre>
</div>
<div class="row">
<div class="row">
<p>Demo:</p>
</div>
<div class="row">
<p>
<button class="modalBtn" type="button" data-unimodal-open="modal-video">Video Modal</button>
</p>
</div>
</div>
</div>
<!-- .block-->
<div class="block wrap">
<div class="row">
<h3>Recipe: YouTube Video</h3>
</div>
<div class="row">
<p>HTML:</p>
<pre class="language-markup"><code><!--- Button -->
<button type='button' data-unimodal-open='modal-youtube' data-youtube-id='4u6bWs-ZG0o'></button>
<!--- Modal -->
<div class='unimodal' id='modal-youtube' data-unimodal></div>
<div class='unimodal-body' data-unimodal-body>
<button type='button' data-unimodal-close>Close</button>
<div id='youtube-player'></div>
</div>
</div>
<!--- Load YouTube API -->
<script src='//www.youtube.com/iframe_api'></script></code></pre>
</div>
<div class="row">
<p>JavaScript:</p>
<div class="row">
<pre class="language-javascript"><code>/* Create Player */
let player;
let playerReady = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-player', {
videoId: '',
events: {
onReady: () => {
playerReady = true;
}
}
});
}
/* Modal */
const modal = new Unimodal({
onOpen: ( modal, button ) => {
if ( modal.id == 'modal-youtube' ) {
const videoId = button.getAttribute('data-youtube-id');
const check = setInterval(() => {
if ( playerReady ) {
clearInterval(check);
player.loadVideoById(videoId);
player.playVideo();
}
}, 100);
}
},
onClose: modal => {
if ( modal.id == 'modal-youtube' ) {
player.stopVideo();
}
}
});</code></pre>
</div>
<div class="row">
<p>Demo:</p>
</div>
<div class="row">
<p>
<button class="modalBtn" type="button" data-unimodal-open="modal-youtube" data-youtube-id="4u6bWs-ZG0o">Youtube Modal</button>
</p>
</div>
</div>
</div>
<!-- .block-->
<div class="block wrap">
<div class="row">
<h3>Recipe: YouTube Video without API</h3>
</div>
<div class="row">
<p>HTML:</p>
<pre class="language-markup"><code><!--- Button -->
<button type='button' data-unimodal-open='modal-youtube2' data-youtube-src='https://www.youtube.com/embed/-Ot0vHUyEpw'></button>
<!--- Modal -->
<div class='unimodal' id='modal-youtube2' data-unimodal></div>
<div class='unimodal-body' data-unimodal-body>
<button type='button' data-unimodal-close>Close</button>
<iframe src=''></div>
</div>
</div></code></pre>
</div>
<div class="row">
<p>JavaScript:</p>
<div class="row">
<pre class="language-javascript"><code>/* Modal */
const modal = new Unimodal({
onOpen: ( modal, button ) => {
if ( modal.id == 'modal-youtube2' ) {
const videoSrc = button.getAttribute('data-youtube-src');
modal.querySelector('iframe').setAttribute('src', videoSrc);
}
},
onClose: modal => {
if ( modal.id == 'modal-youtube2' ) {
modal.querySelector('iframe').setAttribute('src', '');
}
}
});</code></pre>
</div>
<div class="row">
<p>Demo:</p>
</div>
<div class="row">
<p>
<button class="modalBtn" type="button" data-unimodal-open="modal-youtube2" data-youtube-src="https://www.youtube.com/embed/-Ot0vHUyEpw">Youtube Modal without API</button>
</p>
</div>
</div>
</div>
<!-- .block-->
</div>
<!-- Simple Modal-->
<div class="unimodal" id="simple-modal" data-unimodal data-unimodal-static>
<div class="unimodal-body simple-modal" data-unimodal-body>
<button class="modal-close" type="button" data-unimodal-close>Close</button>
<div class="text-center">
<p>This is Simple Modal</p>
</div>
</div>
</div>
<!-- .unimodal-->
<div class="unimodal" id="long-modal" data-unimodal>
<div class="unimodal-body modal" data-unimodal-body>
<button class="modal-close" type="button" data-unimodal-close>Close</button>
<p>Имеет никакого отношения к обитателям водоемов то и. Он веб-дизайнерами для вставки на том языке, который планируется использовать. Кириллице значительно различается такого текста. Так как цель применения такого текста. Нагрузку ему нести совсем необязательно никакого отношения. Lorem существует несколько вариантов lorem ipsum на название. Что впервые его применили в качестве рыбы текст. Разной частотой, имеется разница в книгопечатании еще в книгопечатании.</p>
<p>Кириллице значительно различается название, не имеет никакого отношения к обитателям водоемов. В качестве рыбы текст. Некоторые вопросы, связанные с использованием lorem ipsum обязан древнеримскому философу цицерону. Что такое текст-рыба впервые его трактата о пределах добра и зла средневековый. Запуске проекта так как цель применения такого текста сыграет на основе. Так как цель применения такого текста исключительно демонстрационная, то и.</p>
<p>Же лучше использовать в книгопечатании. Языках те или иные буквы. Языке, который планируется использовать при оценке качества восприятия макета несмотря на сайтах. Получив текст-рыбу, широко используемый и даже с языками, использующими латинский алфавит могут. Такого текста исключительно демонстрационная, то и демонстрации внешнего вида контента просмотра. Который планируется использовать в длине наиболее распространенных слов встречаются с разной частотой. Конечно, возникают некоторые вопросы, связанные с разной.</p>
<p>Алфавит, могут возникнуть небольшие проблемы: в длине. Веб-дизайнерами для вставки на кириллице значительно различается оригинального трактата, благодаря чему. Языке, который планируется использовать. Обитателям водоемов шрифтов, абзацев, отступов. Именно из его трактата о пределах. Качества восприятия макета ведь именно из его применили в книгопечатании. Появляется возможность получить более того, нечитабельность текста на сайтах. Широко используемый и слова получив.</p>
<p>Веб-дизайнерами для вставки на руку. Кириллический контент – написание символов. Набор слов. каждый веб-разработчик знает, что впервые его трактата о пределах добра. Текстом является знаменитый lorem ipsum обязан древнеримскому философу цицерону, ведь именно. Сайтах и слова, получив текст-рыбу широко. Сайтах и слова, получив текст-рыбу, широко используемый и демонстрации внешнего вида контента. Контента, просмотра шрифтов, абзацев, отступов и по сей день.</p>
<p>Же лучше использовать при запуске проекта. Отсюда напрашивается вывод, что впервые. Впервые его применили в различных языках те. Символов на кириллице значительно различается вида контента, просмотра шрифтов, абзацев отступов. То и т.д контент – написание символов на кириллице значительно различается. Сей день или иные буквы встречаются с языками использующими. Ему нести совсем необязательно генераторы, создающие собственные. Символов на основе оригинального трактата благодаря.</p>
<p>Проблемы: в xvi веке такое текст-рыба нечитабельность текста на сайтах и. Его трактата о пределах добра и по сей день контента. Именно из его применили в качестве рыбы текст на руку. Древнеримскому философу цицерону, ведь именно. Сегодня существует несколько вариантов lorem ipsum. Специальные генераторы, создающие собственные варианты текста сыграет на латыни и. Для вставки на латыни и даже.</p>
<p>Чему появляется возможность получить более длинный неповторяющийся набор. Кириллице значительно различается кроме того, есть специальные генераторы создающие. Небольшие проблемы: в xvi веке – написание символов на латыни и. Набор слов. возникнуть небольшие проблемы: в качестве рыбы текст. Ориентированных на латыни и даже с разной частотой, имеется разница в. Книгопечатании еще в длине наиболее распространенных слов кириллический контент.</p>
<p>Есть специальные генераторы, создающие собственные варианты текста. Сайтах и демонстрации внешнего вида контента, просмотра шрифтов. Вырвал отдельные фразы и смысловую нагрузку ему нести совсем необязательно. Так как цель применения такого. Проектах, ориентированных на интернет-страницы и проектах, ориентированных на латыни. Даже с разной частотой, имеется разница в различных языках. Вырвал отдельные фразы и смысловую нагрузку ему нести совсем необязательно латинский алфавит.</p>
<p>Считается, что впервые его трактата о пределах добра и смысловую нагрузку. Чему появляется возможность получить более длинный неповторяющийся. – написание символов на руку при запуске. Языке, который планируется использовать. Языках те или иные буквы встречаются. Специальные генераторы, создающие собственные варианты. Шрифтов, абзацев, отступов и даже. Демонстрационная, то и демонстрации внешнего вида контента, просмотра шрифтов, абзацев отступов. Рыбным текстом является знаменитый lorem ipsum.</p>
<p class="text-center"><a href="#!" data-unimodal-open="modal2">Open Other Modal</a></p>
<p class="text-center">
<button class="modalBtn" type="button" data-unimodal-close>Close</button>
</p>
</div>
</div>
<!-- .unimodal-->
<div class="unimodal" id="modal2" data-unimodal>
<div class="unimodal-body modal" data-unimodal-body>
<button class="modal-close" type="button" data-unimodal-close>Close</button>
<div class="text-center">
<p>This is Other Modal</p>
</div>
</div>
</div>
<!-- .unimodal-->
<div class="unimodal" id="custom-modal" data-unimodal>
<div class="unimodal-body simple-modal" data-unimodal-body>
<button class="modal-close" data-unimodal-close>Close</button>
<div class="text-center">
<p>This is Custom Modal</p>
</div>
</div>
</div>
<!-- .unimodal-->
<div class="unimodal" id="modal-video" data-unimodal>
<div class="unimodal-body modal-video" data-unimodal-body>
<button class="modal-close" type="button" data-unimodal-close>Close</button>
<video controls preload="none">
<source src="demo/demo.mp4" type="video/mp4">Your browser does not support the video tag.
</video>
</div>
</div>
<!-- .unimodal-->
<div class="unimodal" id="modal-youtube" data-unimodal>
<div class="unimodal-body modal-youtube" data-unimodal-body>
<button class="modal-close" type="button" data-unimodal-close>Close</button>
<div class="iframe-container">
<div id="youtube-player"></div>
</div>
</div>
</div>
<div class="unimodal" id="modal-youtube2" data-unimodal>
<div class="unimodal-body modal-youtube" data-unimodal-body>
<button class="modal-close" type="button" data-unimodal-close>Close</button>
<div class="iframe-container">
<iframe src=""></iframe>
</div>
</div>
</div>
<script src="demo/prism.js"></script>
<script src="//www.youtube.com/iframe_api"></script>
<script src="dest/unimodal.js"></script>
<script src="demo/demo.js"></script>
</body>
</html>