Movatterモバイル変換

[0]ホーム
URL:

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

Commitf2fe16c

Browse files
committed
Added 5th and 6th Projects (Modal & Accordion)
1 parentee46f3f commitf2fe16c

File tree

6 files changed

+286
-0
lines changed

6 files changed

+286
-0
lines changed
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<linkrel="stylesheet"href="style.css"/>
7+
<title>Modal</title>
8+
</head>
9+
<body>
10+
<divclass="container">
11+
<buttonclass="btn"data-target="#modal1">Open Modal</button>
12+
<buttonclass="btn"data-target="#modal2">Open Modal 2</button>
13+
<br/>
14+
<p>
15+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, impedit
16+
ex? Neque in animi explicabo magni tempora. Autem voluptatum blanditiis
17+
reiciendis fuga obcaecati. Saepe quibusdam corporis consequuntur iste
18+
omnis natus?
19+
</p>
20+
<p>
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
22+
debitis molestias placeat dignissimos facilis voluptatibus eaque autem,
23+
ipsam ratione explicabo, deserunt ea aspernatur et quasi voluptatum
24+
dolor, labore harum! Rem nulla, architecto ab dicta omnis error nesciunt
25+
qui explicabo a maxime similique placeat autem tempora temporibus
26+
obcaecati repellendus, earum ad.
27+
</p>
28+
</div>
29+
30+
<divclass="modal"id="modal1">
31+
<divclass="header">
32+
<divclass="title">First Modal</div>
33+
<buttonclass="btn close-modal">&times;</button>
34+
</div>
35+
<divclass="body">
36+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere ea
37+
officia consectetur. Laborum, dolor? Assumenda quo corrupti eveniet
38+
velit fugit fugiat odit, dolorum labore obcaecati quia. Commodi
39+
assumenda sed maxime!
40+
</div>
41+
</div>
42+
<divclass="modal"id="modal2">
43+
<divclass="header">
44+
<divclass="title">Second Modal</div>
45+
<buttonclass="btn close-modal">&times;</button>
46+
</div>
47+
<divclass="body">
48+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere ea
49+
officia consectetur. Laborum, dolor? Assumenda quo corrupti eveniet
50+
velit fugit fugiat odit, dolorum labore obcaecati quia. Commodi
51+
assumenda sed maxime!
52+
</div>
53+
</div>
54+
55+
<divid="overlay"></div>
56+
57+
<scriptsrc="script.js"></script>
58+
</body>
59+
</html>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
constbtns=document.querySelectorAll("[data-target]");
2+
constclose_modals=document.querySelectorAll(".close-modal");
3+
constoverlay=document.getElementById("overlay");
4+
5+
btns.forEach((btn)=>{
6+
btn.addEventListener("click",()=>{
7+
document.querySelector(btn.dataset.target).classList.add("active");
8+
overlay.classList.add("active");
9+
});
10+
});
11+
12+
close_modals.forEach((btn)=>{
13+
btn.addEventListener("click",()=>{
14+
constmodal=btn.closest(".modal");
15+
modal.classList.remove("active");
16+
overlay.classList.remove("active");
17+
});
18+
});
19+
20+
window.onclick=(event)=>{
21+
if(event.target==overlay){
22+
constmodals=document.querySelectorAll(".modal");
23+
modals.forEach((modal)=>modal.classList.remove("active"));
24+
overlay.classList.remove("active");
25+
}
26+
};
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
body {
2+
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
3+
}
4+
5+
.container {
6+
width:992px;
7+
margin:0 auto;
8+
}
9+
10+
.btn {
11+
padding:0.5rem1rem;
12+
border:1px solid#ccc;
13+
border-radius:4px;
14+
cursor: pointer;
15+
outline: none;
16+
}
17+
18+
.btn:active {
19+
transform:scale(0.9);
20+
}
21+
22+
.close-modal {
23+
background: none;
24+
border: none;
25+
font-size:1.5rem;
26+
}
27+
28+
.modal {
29+
width:450px;
30+
position: fixed;
31+
top:-50%;
32+
left:50%;
33+
transform:translate(-50%,-50%);
34+
transition: top0.3s ease-in-out;
35+
border:1px solid#ccc;
36+
border-radius:10px;
37+
z-index:2;
38+
background-color:#fff;
39+
}
40+
41+
.modal.active {
42+
top:15%;
43+
}
44+
45+
.modal .header {
46+
display: flex;
47+
justify-content: space-between;
48+
align-items: center;
49+
border-bottom:1px solid#ccc;
50+
padding:0.5rem;
51+
background-color:rgba(0,0,0,0.05);
52+
}
53+
54+
.modal .body {
55+
padding:0.75rem;
56+
}
57+
58+
#overlay {
59+
display: none;
60+
position: fixed;
61+
top:0;
62+
left:0;
63+
width:100%;
64+
height:100%;
65+
background-color:rgba(0,0,0,0.3);
66+
}
67+
68+
#overlay.active {
69+
display: block;
70+
}
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
/>
10+
<linkrel="stylesheet"href="style.css"/>
11+
<title>Accordion</title>
12+
</head>
13+
<body>
14+
<divclass="accordion">
15+
<divclass="accordion-item">
16+
<buttonclass="accordion-header">
17+
<strong>Accordion 1</strong><iclass="fas fa-angle-down"></i>
18+
</button>
19+
<divclass="accordion-body">
20+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis atque,
21+
voluptates minima quod quisquam et quasi debitis officia non illo
22+
harum iure eos reprehenderit quaerat, veritatis asperiores facilis qui
23+
neque.
24+
</div>
25+
</div>
26+
27+
<divclass="accordion-item">
28+
<buttonclass="accordion-header">
29+
<strong>Accordion 2</strong><iclass="fas fa-angle-down"></i>
30+
</button>
31+
<divclass="accordion-body">
32+
Dignissimos perspiciatis amet, qui soluta aliquid, ipsa ea alias
33+
quidem officiis vel, inventore quod labore aspernatur exercitationem
34+
fugit explicabo rerum dolores quo unde assumenda reprehenderit vero
35+
temporibus? Magni, nesciunt vero?
36+
</div>
37+
</div>
38+
<divclass="accordion-item">
39+
<buttonclass="accordion-header">
40+
<strong>Accordion 3</strong><iclass="fas fa-angle-down"></i>
41+
</button>
42+
<divclass="accordion-body">
43+
Amet fuga ipsum velit, quae illo doloremque? Id quidem harum placeat
44+
porro ipsam, animi voluptatem vel mollitia, quae rerum suscipit modi
45+
at consequatur ipsum vitae cum aspernatur itaque non quam?
46+
</div>
47+
</div>
48+
<divclass="accordion-item">
49+
<buttonclass="accordion-header">
50+
<strong>Accordion 4</strong><iclass="fas fa-angle-down"></i>
51+
</button>
52+
<divclass="accordion-body">
53+
Nihil consectetur ipsum nobis eligendi facilis sed corrupti, ab fugit
54+
ducimus dolorem rem nulla excepturi impedit sint ea, eveniet provident
55+
quos repudiandae a quas reiciendis aut, incidunt corporis? Laboriosam,
56+
labore.
57+
</div>
58+
</div>
59+
</div>
60+
61+
<scriptsrc="script.js"></script>
62+
</body>
63+
</html>
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
constacc_btns=document.querySelectorAll(".accordion-header");
2+
constacc_contents=document.querySelectorAll(".accordion-body");
3+
4+
acc_btns.forEach((btn)=>{
5+
btn.addEventListener("click",(e)=>{
6+
acc_contents.forEach((acc)=>{
7+
if(
8+
e.target.nextElementSibling!==acc&&
9+
acc.classList.contains("active")
10+
){
11+
acc.classList.remove("active");
12+
acc_btns.forEach((btn)=>btn.classList.remove("active"));
13+
}
14+
});
15+
16+
constpanel=btn.nextElementSibling;
17+
panel.classList.toggle("active");
18+
btn.classList.toggle("active");
19+
});
20+
});
21+
22+
window.onclick=(e)=>{
23+
if(!e.target.matches(".accordion-header")){
24+
acc_btns.forEach((btn)=>btn.classList.remove("active"));
25+
acc_contents.forEach((acc)=>acc.classList.remove("active"));
26+
}
27+
};
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.accordion {
2+
width:450px;
3+
margin:0 auto;
4+
overflow: hidden;
5+
border-radius:4px;
6+
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
7+
}
8+
9+
.accordion-header {
10+
display: flex;
11+
justify-content: space-between;
12+
padding:0.75rem1rem;
13+
width:100%;
14+
background:#1f8dd6;
15+
border: none;
16+
outline: none;
17+
border-bottom:1px solid#54a0ff;
18+
color:#f3f3f3;
19+
cursor: pointer;
20+
}
21+
22+
.accordion-header.active {
23+
background-color:#1070b1;
24+
}
25+
.accordion-header.activei {
26+
transform:rotate(180deg);
27+
transition: all0.3s ease-in-out;
28+
}
29+
30+
.accordion-body {
31+
padding:01rem;
32+
background-color:#f3f3f3;
33+
max-height:0;
34+
overflow: hidden;
35+
transition: all0.3s ease-in-out;
36+
}
37+
38+
.accordion-body.active {
39+
max-height:10rem;
40+
padding:1rem;
41+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp