-
Javascript - 모달 만들기Javascript 2020. 9. 6. 17:58
모달이란?
- 기존의 브라우저 내용 가리면서 팝업처럼 뜨는 것
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Counter App</title> <link rel="stylesheet" href="modal.css"> </head> <body> <h1>안녕하세요!</h1> <p>내용내용내용</p> <button id="open">모달 열기</button> <div class="modal-wrapper"> <div class="modal"> <div class="modal-title"> 안녕하세요 </div> <p>모달 내용입니다~~~~</p> <div class="close-wrapper"> <button id="close">닫기</button> </div> </div> </div> <script src="modal.js"></script> </body> </html>CSS
.modal-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal{ background: white; padding: 24px 16px; border-radius: 4px; width: 320px; } .modal p{ font-size: 16px; } .modal-title{ font-size: 24px; font-weight: bold; } .close-wrapper{ text-align: right; }JS
const open = document.getElementById('open'); const close = document.getElementById('close'); const modal = document.querySelector('.modal-wrapper'); open.onclick = () => { modal.style.display = "flex"; } close.onclick = () => { modal.style.display = "none"; }'Javascript' 카테고리의 다른 글
Javascript - 다국어 변환 (0) 2020.09.16 Javascript - 카운터 어플리케이션 예제 (0) 2020.09.06 Javascript - Promise all, Promise.race (0) 2020.09.06 Javascript - async / await (0) 2020.09.06 Javascript - Promise (0) 2020.09.06