Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6484c09

Browse files
create modal component
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 63d5dad commit 6484c09

File tree

3 files changed

+103
-0
lines changed

3 files changed

+103
-0
lines changed

‎Vanila-JS/modal-component/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Modal Component</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Modal Component</h1>
13+
<button id="btn" class="btn">Open Modal</button>
14+
</div>
15+
16+
<div id="modal" class="modal">
17+
<div class="modal-container">
18+
<div class="modal-details">
19+
<span>Modal</span>
20+
<span id="close" class="close">&#x2716;</span>
21+
<hr />
22+
<p>
23+
Lorem Ipsum is simply dummy text of the printing and typesetting
24+
industry. Lorem Ipsum has been the industry's standard dummy text
25+
ever since the 1500s, when an unknown printer took a galley of type
26+
and scrambled it to make a type specimen book. It has survived not
27+
only five centuries, but also the leap into electronic typesetting,
28+
remaining essentially unchanged. It was popularised in the 1960s
29+
with the release of Letraset sheets containing Lorem Ipsum passages,
30+
and more recently with desktop publishing software like Aldus
31+
PageMaker including versions of Lorem Ipsum.
32+
</p>
33+
</div>
34+
</div>
35+
</div>
36+
<script src="index.js"></script>
37+
</body>
38+
</html>

‎Vanila-JS/modal-component/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let btn = document.getElementById("btn");
2+
let modal = document.getElementById("modal");
3+
let close = document.getElementById("close");
4+
5+
btn.addEventListener("click", function (e) {
6+
modal.style.display = "block";
7+
});
8+
9+
close.addEventListener("click", function (e) {
10+
modal.style.display = "none";
11+
});

‎Vanila-JS/modal-component/styles.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
}
6+
7+
.btn {
8+
background-color: #286090;
9+
border: 0px;
10+
height: 30px;
11+
color: white;
12+
border-radius: 5px;
13+
padding-left: 10px;
14+
padding-right: 10px;
15+
cursor: pointer;
16+
}
17+
18+
.modal {
19+
display: none;
20+
position: fixed;
21+
z-index: 1;
22+
padding-top: 100px;
23+
left: 0;
24+
top: 0;
25+
width: 100%;
26+
height: 100%;
27+
overflow: auto;
28+
background-color: rgba(0, 0, 0, 0.4);
29+
}
30+
31+
.modal-container {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
}
36+
37+
.modal-details {
38+
text-align: center;
39+
background-color: #fefefe;
40+
border: 1px solid gray;
41+
width: 80%;
42+
padding: 10px;
43+
font-size: 20px;
44+
font-weight: bold;
45+
}
46+
47+
.close {
48+
cursor: pointer;
49+
float: right;
50+
}
51+
52+
.close:hover {
53+
color: red;
54+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /