오늘은 모달창을 만들어보겠습니다.
css파일에서 볼 부분은 2곳입니다.
1. ` .modal-odverlay{} ` : 모달의 기본 스타일을 설정합니다.
2. ` .open-modal ` : 모달의 가시성을 조절합니다.
js파일에서는 2가지를 알아야합니다,
1. modal.classList.add("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 추가합니다.
2. modal.classList.remove("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 제거합니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- hero -->
<header class="hero">
<div class="banner">
<h1>modal project</h1>
<button class="btn modal-btn">
open modal
</button>
</div>
</header>
<!-- modal -->
<div class="modal-overlay">
<div class="modal-container">
<h3>modal content</h3>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
app.js
const modalBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".modal-overlay");
const closeBtn = document.querySelector(".close-btn");
// "modal-btn" 클래스를 가진 요소에 클릭 이벤트 리스너를 추가합니다.
modalBtn.addEventListener("click", function () {
// "open-modal" 클래스를 modal 요소의 클래스 리스트에 추가합니다.
modal.classList.add("open-modal");
});
// "close-btn" 클래스를 가진 요소에 클릭 이벤트 리스너를 추가합니다.
closeBtn.addEventListener("click", function () {
// "open-modal" 클래스를 modal 요소의 클래스 리스트에서 제거합니다.
modal.classList.remove("open-modal");
});
styles.css
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: #49a6e9;
/* --clr-primary-5: rgb(73, 166, 233); */
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img:not(.logo) {
width: 100%;
}
img {
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: transparent;
color: var(--clr-black);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid var(--clr-black);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
}
.btn:hover {
color: var(--clr-white);
background: var(--clr-black);
}
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Modal
===============
*/
.hero {
min-height: 100vh;
/* background: url("./hero.jpeg") center/cover no-repeat; */
display: grid;
place-items: center;
}
.banner {
background: var(--clr-white);
padding: 4rem 0;
border-radius: var(--radius);
box-shadow: var(--light-shadow);
text-align: center;
width: 90vw;
max-width: var(--fixed-width);
}
.modal-btn {
margin-top: 2rem;
background: var(--clr-primary-5);
border-color: var(--clr-primary-5);
color: var(--clr-white);
}
.modal-btn:hover {
background: transparent;
color: var(--clr-primary-5);
}
/* 모달의 배경과 위치를 설정하는 기본 스타일 */
.modal-overlay {
position: fixed; /* 모달을 화면에 고정시켜 어느 위치에 스크롤해도 항상 같은 위치에 보이게 합니다. */
top: 0; /* 화면의 가장 위에서부터 시작합니다. */
left: 0; /* 화면의 가장 왼쪽에서부터 시작합니다. */
width: 100%; /* 모달의 너비를 화면 너비와 동일하게 설정합니다. */
height: 100%; /* 모달의 높이를 화면 높이와 동일하게 설정합니다. */
background: rgba(73, 166, 233, 0.5); /* 반투명한 배경색을 설정합니다. 여기서는 파란색의 반투명 배경입니다. */
display: grid; /* CSS 그리드 레이아웃을 사용합니다. */
place-items: center; /* 그리드 아이템을 중앙에 배치합니다. */
transition: var(--transition); /* transition 변수를 사용해 애니메이션 효과를 적용합니다. 변수는 다른 곳에서 정의되어야 합니다. */
visibility: hidden; /* 기본적으로 모달은 숨겨져 있습니다. */
z-index: -10; /* 모달이 다른 콘텐츠 뒤에 위치하도록 z-index를 음수로 설정합니다. */
}
/* OPEN/CLOSE MODAL */
.open-modal {
visibility: visible; /* .open-modal 클래스가 적용된 요소를 화면에 보이게 만듭니다.*/
z-index: 10; /* 해당 요소는 z-index값이 10보다 작은 요소들보다 위에 위치하게 됩니다. */
}
.modal-container {
background: var(--clr-white);
border-radius: var(--radius);
width: 90vw;
height: 30vh;
max-width: var(--fixed-width);
text-align: center;
display: grid;
place-items: center;
position: relative;
}
.close-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2rem;
background: transparent;
border-color: transparent;
color: var(--clr-red-dark);
cursor: pointer;
transition: var(--transition);
}
.close-btn:hover {
color: var(--clr-red-light);
transform: scale(1.3);
}
결과
`open modal` 버튼을 눌러서 모달창이 나오는지 확인해보세요,.
'JavaScript' 카테고리의 다른 글
| [Javascript] 버튼 이동 시키기 (0) | 2024.04.29 |
|---|---|
| [Javascript] FAQ 페이지 만들기 (2) | 2024.04.28 |
| [Javascript] 자바스크립트로 5초 마다 변경되는 배너 만들기 (0) | 2024.04.18 |
| [Javascript] 마우스 오버 텍스트 색상 변경 (0) | 2024.04.11 |
| [JavaScript] Sidebar 만들기 (0) | 2024.04.10 |
