728x90
모달창이란?
모달창(Modal Window)은 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 그래서 응용 프로그램의 주 창의 작업 흐름을 방해한다.
전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal</title>
<style>
#modal.modal-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
#modal .modal-window {
background: rgba( 69, 139, 197, 0.70 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 13.5px );
-webkit-backdrop-filter: blur( 13.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
width: 400px;
height: 500px;
position: relative;
top: -100px;
padding: 10px;
}
#modal .title {
padding-left: 10px;
display: inline;
text-shadow: 1px 1px 2px gray;
color: white;
}
#modal .title h2 {
display: inline;
}
#modal .close-area {
display: inline;
float: right;
padding-right: 10px;
cursor: pointer;
text-shadow: 1px 1px 2px gray;
color: white;
}
#modal .content {
margin-top: 20px;
padding: 0px 10px;
text-shadow: 1px 1px 2px gray;
color: white;
}
</style>
</head>
<body>
<div id="container">
<h2>모달창 예제</h2>
<div id="">모달창 예제 입니다.</div>
</div>
<div id="modal" class="modal-overlay">
<div class="modal-window">
<div class="title">
<h2>모달</h2>
</div>
<div class="close-area">X</div>
<div class="content">1. 첫번쨰 공지사항</div>
<div class="content">2. 두번째 공지사항</div>
<div class="content">3. 세번째 공지사항</div>
<div class="content">4. 네번째 공지사항</div>
</div>
</div>
<script>
const modal = document.getElementById("modal")
function modalOn() {
modal.style.display = "flex"
}
function isModalOn() {
return modal.style.display === "flex"
}
function modalOff() {
modal.style.display = "none"
}
const closeBtn = modal.querySelector(".close-area")
closeBtn.addEventListener("click", e => {
modalOff();
})
})
</script>
</body>
</html>
x버튼을 누르면 modalOff()메서드를 실행시켜서 모달창의 display를 none으로 바꿔줍니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] 사용자 미디어 디바이스에 접근하여 영상 출력하기 (0) | 2022.03.29 |
|---|---|
| [JavaScript] Select 메뉴 만들기 (0) | 2022.03.27 |
| [JavaScript] 체크박스 전체 선택하기 예제 (0) | 2022.03.15 |
| [JavaScript] 현재 위치 받아오기 (0) | 2022.03.12 |
| [JavaScript] 이미지 드래그해서 옮기기 (0) | 2022.03.05 |
