-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·76 lines (54 loc) · 2.99 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/modal.css">
<title>Javascript Modal plugin</title>
</head>
<body>
<div class="svgs" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-close" viewBox="0 0 16.196 16.197">
<title>Close</title>
<path d="M15.615,3.07c0.619-0.62,0.77-1.618,0.258-2.329c-0.652-0.906-1.924-0.981-2.679-0.226L8.627,5.084 c-0.292,0.292-0.765,0.292-1.057,0L3.069,0.582c-0.62-0.62-1.617-0.771-2.328-0.258C-0.165,0.976-0.24,2.248,0.516,3.003 l4.567,4.569c0.292,0.292,0.292,0.765,0,1.057l-4.501,4.503c-0.619,0.619-0.771,1.617-0.259,2.328 c0.652,0.902,1.924,0.976,2.679,0.226l4.568-4.569c0.291-0.291,0.765-0.291,1.057,0l4.501,4.503 c0.619,0.626,1.616,0.772,2.327,0.259c0.906-0.652,0.981-1.924,0.227-2.68l-4.568-4.569c-0.291-.292-0.291-0.765,0-1.057 L15.615,3.07z"></path>
</symbol>
</svg>
</div>
<div class="container">
<button class="btn" type="button" data-trigger-modal="modal">Trigger modal</button>
</div>
<div class="modal" id="modal">
<div class="modal__window">
<button class="modal__close-btn" type="button" data-close-modal>
<svg class="modal__close-icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<div class="modal__header">
<h2 class="modal__title">Title of modal</h2>
</div>
<div class="modal__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis laoreet eros quis efficitur. Phasellus scelerisque eu est non sollicitudin. Mauris condimentum non sapien et scelerisque. Donec at lacinia mauris, nec rutrum metus. In vulputate luctus suscipit. Nulla sit amet lectus in odio ullamcorper ornare. Curabitur bibendum lacus nec tortor congue interdum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et lorem id neque semper scelerisque ut ac nunc. Donec rhoncus consequat pretium. In volutpat pretium dui, semper ullamcorper turpis auctor et. Cras suscipit, urna vel euismod consequat, libero lectus elementum augue, in rutrum nisi dolor vel urna. Pellentesque tincidunt, justo nec fringilla pharetra, justo turpis elementum tortor, ac venenatis nibh nulla at nisl.</p>
<button class="btn" type="button" data-close-modal>Close Modal</button>
</div>
</div>
</div>
<script src="js/modal.js"></script>
<script>
var modalEl = document.getElementById('modal');
var modalInst = new Modal(modalEl, {
openCallback: function() {
console.log('Callback for when Modal is open.');
},
closeCallback: function() {
console.log('Callback for when Modal is closed.');
}
});
modalInst.init();
</script>
</body>
</html>