-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (186 loc) · 10.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal window</title>
<link href="./demo.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
</head>
<body>
<div class="container">
<div class="box-top">
<div id="theme-toggle-box">
<span id="theme-to-light" data-theme="light">Light theme</span>
<span id="theme-to-dark" data-theme="dark">Dark theme</span>
</div>
</div>
<header>
<h1>Web-component <span>modal window</span></h1>
<nav class="container-buttons">
<button class="cl-button" onclick="document.getElementById('modal-win1').show()">Demo 1</button>
<button class="cl-button" onclick="document.getElementById('modal-win2').show()">Demo 2</button>
<button class="cl-button" onclick="document.getElementById('modal-win3').show()">Demo 3</button>
<button class="cl-button" onclick="document.getElementById('modal-win4').show()">Demo 4</button>
<button class="cl-button" onclick="document.getElementById('modal-win5').show()">Demo 5</button>
</nav>
</header>
<section>
<p>
Fugiat cillum minim in nulla nisi consequat ad. Laborum voluptate incididunt quis dolore voluptate anim
consectetur. Sunt sint esse ut eiusmod exercitation mollit aliqua aute. Aliquip Lorem reprehenderit aliquip quis
occaecat veniam id. Nisi pariatur tempor irure consequat deserunt anim proident Lorem amet labore. Occaecat
mollit ad et do mollit exercitation sit.
Quis sint dolor do velit eu proident elit magna excepteur eu. Duis irure ea sint incididunt Lorem anim sunt
officia Lorem ea id quis officia ullamco. Fugiat ad dolore officia et Lorem sunt do sit excepteur nisi commodo.
Qui qui enim velit cillum cillum cupidatat exercitation irure laborum exercitation pariatur commodo ullamco
esse. Amet mollit eiusmod cillum quis minim ullamco incididunt reprehenderit excepteur elit. Tempor mollit elit
fugiat ut tempor velit deserunt adipisicing. Sunt nostrud quis consequat laborum dolore mollit duis irure
cupidatat magna non et officia dolore.
Duis non exercitation eu tempor sit id voluptate elit laborum. Amet veniam consequat fugiat dolore adipisicing
magna ipsum. Deserunt velit laborum anim in exercitation irure nulla. In non voluptate cillum irure sit Lorem
cillum proident ullamco.
Anim labore in id ullamco labore. Dolore elit sint culpa dolore ex id occaecat id consectetur enim incididunt
culpa tempor. Sint nulla dolor do mollit adipisicing aute et minim do exercitation qui occaecat consequat. Dolor
ipsum excepteur proident ea qui aliquip incididunt dolore pariatur quis nostrud do.
Duis non exercitation eu tempor sit id voluptate elit laborum. Amet veniam consequat fugiat dolore adipisicing
magna ipsum. Deserunt velit laborum anim in exercitation irure nulla. In non voluptate cillum irure sit Lorem
cillum proident ullamco.
Anim labore in id ullamco labore. Dolore elit sint culpa dolore ex id occaecat id consectetur enim incididunt
culpa tempor. Sint nulla dolor do mollit adipisicing aute et minim do exercitation qui occaecat consequat. Dolor
ipsum excepteur proident ea qui aliquip incididunt dolore pariatur quis nostrud do.
Duis non exercitation eu tempor sit id voluptate elit laborum. Amet veniam consequat fugiat dolore adipisicing
magna ipsum. Deserunt velit laborum anim in exercitation irure nulla. In non voluptate cillum irure sit Lorem
cillum proident ullamco.
Anim labore in id ullamco labore. Dolore elit sint culpa dolore ex id occaecat id consectetur enim incididunt
culpa tempor. Sint nulla dolor do mollit adipisicing aute et minim do exercitation qui occaecat consequat. Dolor
ipsum excepteur proident ea qui aliquip incididunt dolore pariatur quis nostrud do.
</p>
</section>
</div>
<modal-win caption="Article title" id="modal-win1" footer="false" moveable="true">
<div slot="modal-main-content">
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum semper risus
eget rhoncus. Sed dapibus
lacinia risus, id sagittis mauris viverra vel. Class aptent taciti sociosqu ad litora torquent per conubia
nostra,
per inceptos himenaeos. Mauris in ante viverra, iaculis ante sit amet, dapibus purus. Sed facilisis, lectus a
cursus
semper, risus justo finibus lorem, dictum commodo sem mauris nec lectus. Sed nisi dui, rhoncus a nisi elementum,
tristique tristique arcu. Sed dapibus elit at ligula auctor auctor. Vestibulum consequat elit quam, sit amet
placerat velit venenatis a. Cras nec turpis quis neque lobortis dictum vel eu sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum semper risus eget rhoncus. Sed dapibus
lacinia risus, id sagittis mauris viverra vel. Class aptent taciti sociosqu ad litora torquent per conubia
nostra.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum semper risus
eget rhoncus. Sed dapibus
lacinia risus, id sagittis mauris viverra vel. Class aptent taciti sociosqu ad litora torquent per conubia
nostra,
per inceptos himenaeos. Mauris in ante viverra, iaculis ante sit amet, dapibus purus. Sed facilisis, lectus a
cursus
semper, risus justo finibus lorem, dictum commodo sem mauris nec lectus. Sed nisi dui, rhoncus a nisi elementum,
tristique tristique arcu. Sed dapibus elit at ligula auctor auctor. Vestibulum consequat elit quam, sit amet
placerat velit venenatis a. Cras nec turpis quis neque lobortis dictum vel eu sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum semper risus eget rhoncus. Sed dapibus
lacinia risus, id sagittis mauris viverra vel. Class aptent taciti sociosqu ad litora torquent per conubia
nostra.
</p>
</div>
</modal-win>
<modal-win caption="Are you sure?" id="modal-win2" moveable="true" maximize="false" resizable="false">
<div slot="modal-main-content">
Please confirm removing this item
</div>
<div slot="modal-footer-content">
<div class="btn-box active">
<button class="btn btn-grey">Сancel</button>
<button class="btn btn-red">Delete</button>
</div>
</div>
</modal-win>
<modal-win caption="Fun Video" class="modal-body-fit-content" id="modal-win3" footer="false">
<div slot="modal-main-content">
<div class="video-wrapper">
<video preload="auto" controls volume="0" poster="img/ForBiggerFun.jpg">
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</modal-win>
<modal-win caption="Slider" class="modal-body-fit-content" id="modal-win4">
<div slot="modal-main-content" id="example-slider"></div>
<div slot="modal-footer-content">
<div class="preview-icon-control">
<span class="footer-icons icon-left"></span>
<span class="footer-icons icon-right"></span>
</div>
</div>
</modal-win>
<modal-win caption="Sign In Form" id="modal-win5" maximize="false" resizable="false" footer="false">
<div slot="modal-main-content">
<div class="dg-edit-box" id="forms-box">
<form novalidate="" autocomplete="off" class="login-form active">
<div class="form-title">Sign In Form</div>
<div class="form-group-textfield">
<input type="text" class="form-input" name="lgn_form" placeholder="" required="true" autocomplete="off"
readonly onfocus="this.removeAttribute('readonly')">
<label class="form-label">Login</label>
</div>
<div class="form-group-textfield">
<input type="password" class="form-input" name="pwd_form" placeholder="" required="true" autocomplete="off"
readonly onfocus="this.removeAttribute('readonly')">
<label class="form-label grid-50-50">Password
<a href="#" class="link-form toPasswordRecover">Forgot your password?</a>
</label>
</div>
<div class="btn-box">
<a href="#" class="link-form toSignUp">Not a member? Sign up now</a>
<button class="btn btn-blue btn-submit">Sign In</button>
</div>
</form>
<form novalidate="" autocomplete="off" class="password-recover">
<div class="form-title">Password Recovery</div>
<div class="form-group-textfield">
<input type="email" class="form-input" name="lgn_form" placeholder="" required="true" autocomplete="off"
readonly onfocus="this.removeAttribute('readonly')">
<label class="form-label">Email</label>
</div>
<div class="btn-box">
<div class="box-links">
<a href="#" class="link-form toLogin">Sign in here</a>
<a href="#" class="link-form toSignUp">Sign up now</a>
</div>
<button class="btn btn-blue btn-submit">Send password</button>
</div>
</form>
<form novalidate="" autocomplete="off" class="signup-form">
<div class="form-title">Sign Up Form</div>
<div class="form-group-textfield">
<input type="email" class="form-input" name="lgn_form" placeholder="" required="true" autocomplete="off"
readonly onfocus="this.removeAttribute('readonly')">
<label class="form-label">Email</label>
</div>
<div class="form-group-textfield">
<input type="password" class="form-input" name="pwd_form" placeholder="" required="true" autocomplete="off"
readonly onfocus="this.removeAttribute('readonly')">
<label class="form-label">Password</label>
</div>
<div class="form-group-textfield">
<input type="password" class="form-input" name="pwd_form" placeholder="" required="true" autocomplete="off"
readonly onfocus="this.removeAttribute('readonly')">
<label class="form-label">Repeat password</label>
</div>
<div class="btn-box">
<a href="#" class="link-form toLogin">Already registered? Sign in here</a>
<button class="btn btn-blue btn-submit">Sign Up</button>
</div>
</form>
</div>
</div>
</modal-win>
<script src="./demo.js"></script>
</body>
</html>