-
Notifications
You must be signed in to change notification settings - Fork 0
/
js--q2-4--popup.html
127 lines (106 loc) · 3.51 KB
/
js--q2-4--popup.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Task 2.4: Popup</title>
<link rel="stylesheet" href="style.css" />
<style>
body{
overflow: hidden;
position: relative;
}
.main-content, main{
display: grid;
}
main{
min-width: 80vw;
max-width: min-content;
min-height: min-content;
max-height: fit-content;
justify-content: center;
}
.popup-wrapper{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
background-color: #00000066;
backdrop-filter: blur(2px);
}
#popup{
min-width: 50vw;
max-width: min-content;
justify-content: center;
align-items: center;
background-color: white;
text-align: center;
border: 2px solid #000;
border-radius: 0.5rem;
padding: 1rem;
transition-duration: 0.5s;
}
#popup *:not([type='button']){
border: none;
}
.main-content p{
border: none;
padding: 1.2rem 0px;
}
p{
line-height: 1.5;
letter-spacing: 2px;
}
h3{
line-height: 1.5;
}
</style>
</head>
<body>
<main>
<div class="main-content">
<h1>Open popup at your own risk!!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima deserunt dolorem cum excepturi numquam inventore, assumenda repellendus nemo, repellat, officiis nisi! Aliquam modi animi impedit. Non voluptas velit, nam nisi iure consectetur, deserunt odio doloribus explicabo quis quo nemo possimus molestias fuga. Iusto ea ut optio reiciendis enim voluptatem deserunt. Eos unde distinctio dignissimos error ducimus!</div>
<button onclick="openPopup()">Open Popup</button>
</div>
<div class="popup-wrapper" style="display: none">
<div id="popup" class="glassmorphism" >
<h1>This is a Popup!</h1>
<div>
<p>
To view detailed information about this text, please click on the "Open Popup" button. This text is currently visible to you because you have clicked on the aforementioned button.
</p>
<h3>
How dare you open the Popup? Koi kuch bolega to kuch bhi kar doge?
Close the popup right now!
</h3>
</div>
<button type="button" onclick="closePopup()">Close Popup</button>
</div>
</div>
</main>
<script>
let openPopupBtn = document.querySelector('button[onclick="openPopup()"]');
console.log('bodyChild executed');
let closePopupBtn = document.querySelector('button[onclick="closePopup()"]');
console.log('bodyChild executed');
let popup = document.querySelector('.popup-wrapper');
console.log('bodyChild executed');
function openPopup(){
console.log('----start of openPopup----');
popup.style.display = 'flex';
console.log('----end of openPopup----');
}
function closePopup(){
console.log('----start of closePopup----');
popup.style.display = 'none';
console.log('----end of closePopup----');
}
</script>
</body>
</html>