-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
113 lines (95 loc) · 16 KB
/
demo.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
<!DOCTYPE html>
<html ng-app="ayDialog">
<head>
<meta charset="utf-8">
<title>Dialog demo</title>
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<script src="node_modules/angular/angular.min.js"></script>
<!-- <script src="node_modules/angular/angular-animate.min.js"></script> -->
<script src="dialog.js"></script>
<style>
body {
margin: 0;
padding: 1em;
padding-top: calc(env(safe-area-inset-top, 0) + 1em);
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 1em);
padding-left: calc(env(safe-area-inset-left, 0) + 1em);
padding-right: calc(env(safe-area-inset-right, 0) + 1em);
}
#dlg3 {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<dialog id="dlg1">
<h1>Dialog Title</h1>
<p>Hello World.</p>
<label for="inSearch">Search:</label>
<input id="inSearch" type="search" autofocus>
<p><button id="btn2">Open child</button></p>
<p><button id="btnClose">Close</button></p>
</dialog>
<dialog id="dlg2">
This is a second modal
<button id="btnClose2">Close</button>
</dialog>
<dialog id="dlg3">
This is a full screen modal
<button id="btnClose3">Close</button>
</dialog>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p><button id="btn1">Click here to open modal</button></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p><button id="btn3">Click here to open full screen modal</button></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet interdum dolor, id facilisis ex. Phasellus iaculis nisl magna, nec molestie nunc interdum sed. Nullam volutpat tincidunt velit vel tempus. Sed sit amet pellentesque sapien. Cras vitae mauris laoreet, volutpat nibh eget, mollis felis. Sed cursus nunc in mi consequat feugiat. Proin eget augue vitae risus blandit commodo sit amet in nisl. Sed ac diam sit amet ipsum viverra rutrum eget convallis turpis. Phasellus a rutrum lacus. Cras diam justo, placerat a elementum a, laoreet nec nisi. Vivamus consectetur sed nisi vitae elementum. Duis vitae arcu vitae arcu fringilla interdum. Nulla vitae nunc vitae sapien pulvinar facilisis. Fusce ac sapien euismod, auctor nibh ac, finibus mauris.</p>
<script>
var dlg1 = document.querySelector('#dlg1');
var btn1 = document.querySelector('#btn1');
var dlg2 = document.querySelector('#dlg2');
var btn2 = document.querySelector('#btn2');
var dlg3 = document.querySelector('#dlg3');
var btn3 = document.querySelector('#btn3');
var btnClose = document.querySelector('#btnClose');
var btnClose2 = document.querySelector('#btnClose2');
var btnClose3 = document.querySelector('#btnClose3');
btn1.addEventListener('click', function() {
dlg1.showModal();
});
btn2.addEventListener('click', function() {
dlg2.showModal();
});
btn3.addEventListener('click', function() {
dlg3.showModal();
});
btnClose.addEventListener('click', function() {
var srch = document.querySelector('#inSearch');
dlg1.close(srch.value);
});
btnClose2.addEventListener('click', function() {
dlg2.close();
});
btnClose3.addEventListener('click', function() {
dlg3.close();
});
dlg1.addEventListener('close', function() {
console.log(dlg1.returnValue);
});
</script>
</body>
</html>