-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
228 lines (212 loc) · 12.6 KB
/
Copy pathdemo.html
File metadata and controls
228 lines (212 loc) · 12.6 KB
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
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="modalwizard.js"></script>
</head>
<body>
<div class="flex flex-row py-8 px-8">
<button
class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
id="modal1_btn_open"
>
Show Modal Wizard
</button>
</div>
<div id="modal1" tabindex="-1" aria-hidden="true" class="flex h-screen hidden px-8">
<div class="relative w-full max-w-md max-h-full">
<!-- Page 1 content -->
<div id="modal1_page1">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
type="button"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
id="modal1_page1_btn_close"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="px-6 py-6 lg:px-8">
<h3 class="mb-2 text-xl font-medium text-gray-900 dark:text-white">Page 1</h3>
</div>
<div class="mb-8 ml-8 mr-8">
<p class="text-sm dark:text-white">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
<div class="ml-8">
<label class="block text-white text-sm font-bold mb-2" for="email"> E-Mail </label>
<input
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="email"
type="email"
placeholder="john.doe@mail.com"
/>
</div>
<div class="px-6 py-6 lg:px-8 flex flex-row justify-end">
<button
id="modal1_page1_btn_next"
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
>
Next
</button>
</div>
</div>
</div>
<!-- page1 end -->
<!-- Page 2 content -->
<div id="modal1_page2">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
type="button"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
id="modal1_page2_btn_close"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="px-6 py-6 lg:px-8">
<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Page 2</h3>
</div>
<div class="ml-8 mb-8 mr-8">
<p class="text-sm dark:text-white">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="ml-8">
<label class="md:w-2/3 block dark:text-white font-bold">
<input class="mr-2 leading-tight" type="checkbox" id="newsletter" />
<span class="text-sm">Send me your newsletter!</span>
</label>
</div>
<div class="px-6 py-6 lg:px-8 gap-6 flex flex-row justify-end">
<button
id="modal1_page2_btn_back"
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
>
Back
</button>
<button
id="modal1_page2_btn_next"
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
>
Next
</button>
</div>
</div>
</div>
<!-- page2 end -->
<!-- Page 3 content -->
<div id="modal1_page3">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
type="button"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
id="modal1_page3_btn_close"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="px-6 py-6 lg:px-8">
<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Page 3</h3>
</div>
<div class="ml-8 mb-8 flex flex-col justify-center items-center">
<div><p class="text-lg dark:text-white">Thank you for choosing MyCompany!</p></div>
<div class="my-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="dark:white"
class="bi bi-balloon-heart"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="m8 2.42-.717-.737c-1.13-1.161-3.243-.777-4.01.72-.35.685-.451 1.707.236 3.062C4.16 6.753 5.52 8.32 8 10.042c2.479-1.723 3.839-3.29 4.491-4.577.687-1.355.587-2.377.236-3.061-.767-1.498-2.88-1.882-4.01-.721L8 2.42Zm-.49 8.5c-10.78-7.44-3-13.155.359-10.063.045.041.089.084.132.129.043-.045.087-.088.132-.129 3.36-3.092 11.137 2.624.357 10.063l.235.468a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3.177 3.177 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.235-.468ZM6.013 2.06c-.649-.18-1.483.083-1.85.798-.131.258-.245.689-.08 1.335.063.244.414.198.487-.043.21-.697.627-1.447 1.359-1.692.217-.073.304-.337.084-.398Z"
/>
</svg>
</div>
</div>
<div class="px-6 py-6 lg:px-8 gap-6 flex flex-row justify-end">
<button
id="modal1_page3_btn_back"
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
>
Back
</button>
<button
id="modal1_page3_btn_finish"
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
>
Finish
</button>
</div>
</div>
</div>
<!-- page3 end -->
</div>
</div>
<script type="text/javascript">
window.onload = function () {
// first, initialize modal wizards
let modals = initModals(["modal1"]);
// hook a finish callback to modal1
modals["modal1"].finish_callback = function (data) {
console.log("modal1 finished with the following data: ");
// data contains all input data from all pages
console.log(data);
};
// do some validation on first page
modals["modal1"].pages[0].validation_callback = function () {
let email_id = document.getElementById("email");
if (!email_id.value.includes("@")) {
email_id.style.borderColor = "red";
return false;
}
return true;
};
};
</script>
</body>
</html>