Skip to content

Commit 935b923

Browse files
DeveloperFardeenDeveloperFardeen
authored
Create index.html
1 parent 1842104 commit 935b923

File tree

1 file changed

+117
-0
lines changed

1 file changed

+117
-0
lines changed

‎index.html

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Multiple Popups With Single Code Block Of JS</title>
6+
<link rel="stylesheet" href="styles.css">
7+
8+
</head>
9+
<body>
10+
<!-- All Buttons -->
11+
<div class="btn-ctnr">
12+
<button class="open-popup" data-popup="popup1">Open Popup 01</button>
13+
<button class="open-popup" data-popup="popup2">Open Popup 02</button>
14+
<button class="open-popup" data-popup="popup3">Open Popup 03</button><br>
15+
<button class="open-popup" data-popup="popup4">Open Popup 04</button>
16+
<button class="open-popup" data-popup="popup5">Open Popup 05</button>
17+
<button class="open-popup" data-popup="popup6">Open Popup 06</button><br>
18+
<button class="open-popup" data-popup="popup7">Open Popup 07</button>
19+
<button class="open-popup" data-popup="popup8">Open Popup 08</button>
20+
<button class="open-popup" data-popup="popup9">Open Popup 09</button><br>
21+
<button class="open-popup" data-popup="popup10">Open Popup 10</button>
22+
<button class="open-popup" data-popup="popup11">Open Popup 11</button>
23+
<button class="open-popup" data-popup="popup12">Open Popup 12</button>
24+
</div>
25+
26+
<!-- All popups -->
27+
<div id="popup1" class="popup">
28+
<div class="popup-content">
29+
<span class="close" data-popup="popup1">&times;</span>
30+
<p>Popup 1 Content</p>
31+
</div>
32+
</div>
33+
34+
<div id="popup2" class="popup">
35+
<div class="popup-content">
36+
<span class="close" data-popup="popup2">&times;</span>
37+
<p>Popup 2 Content</p>
38+
</div>
39+
</div>
40+
41+
<div id="popup3" class="popup">
42+
<div class="popup-content">
43+
<span class="close" data-popup="popup3">&times;</span>
44+
<p>Popup 3 Content</p>
45+
<p>Other content</p>
46+
<p>Other content</p>
47+
<p>Other content</p>
48+
<p>Other content</p>
49+
<p>Other content</p>
50+
</div>
51+
</div>
52+
53+
<div id="popup4" class="popup">
54+
<div class="popup-content">
55+
<span class="close" data-popup="popup4">&times;</span>
56+
<p>Popup 4 Content</p>
57+
</div>
58+
</div>
59+
60+
<div id="popup5" class="popup">
61+
<div class="popup-content">
62+
<span class="close" data-popup="popup5">&times;</span>
63+
<p>Popup 5 Content</p>
64+
</div>
65+
</div>
66+
67+
<div id="popup6" class="popup">
68+
<div class="popup-content">
69+
<span class="close" data-popup="popup6">&times;</span>
70+
<p>Popup 6 Content</p>
71+
</div>
72+
</div>
73+
74+
<div id="popup7" class="popup">
75+
<div class="popup-content">
76+
<span class="close" data-popup="popup7">&times;</span>
77+
<p>Popup 7 Content</p>
78+
</div>
79+
</div>
80+
81+
<div id="popup8" class="popup">
82+
<div class="popup-content">
83+
<span class="close" data-popup="popup8">&times;</span>
84+
<p>Popup 8 Content</p>
85+
</div>
86+
</div>
87+
88+
<div id="popup9" class="popup">
89+
<div class="popup-content">
90+
<span class="close" data-popup="popup9">&times;</span>
91+
<p>Popup 9 Content</p>
92+
</div>
93+
</div>
94+
95+
<div id="popup10" class="popup">
96+
<div class="popup-content">
97+
<span class="close" data-popup="popup10">&times;</span>
98+
<p>Popup 10 Content</p>
99+
</div>
100+
</div>
101+
102+
<div id="popup11" class="popup">
103+
<div class="popup-content">
104+
<span class="close" data-popup="popup11">&times;</span>
105+
<p>Popup 11 Content</p>
106+
</div>
107+
</div>
108+
109+
<div id="popup12" class="popup">
110+
<div class="popup-content">
111+
<span class="close" data-popup="popup12">&times;</span>
112+
<p>Popup 12 Content</p>
113+
</div>
114+
</div>
115+
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)