반응형
HTML의 dialog 태그를 이용하면 많은 스크립트를 작성하지 않고 손쉽게 모달창을 만들 수 있다.
<!doctype html>
<html lang="en">
<head>
<title>모달창 손쉽게 만들기</title>
<style>
/* 모달 바깥 배경색 */
dialog::backdrop {
background-color: red;
}
</style>
</head>
<body>
<button class="open">모달 열기 버튼</button>
<dialog>
모달창 내용
<form method="dialog">
<button class="close">모달 닫기 버튼</button>
</form>
</dialog>
<script>
const button = document.querySelector("button.open");
const dialog = document.querySelector("dialog");
button.addEventListener("click", () => {dialog.showModal()})
dialog.addEventListener("click", () => {
console.log(dialog.returnValue);
})
</script>
</body>
</html>반응형
'웹_프론트엔드 > HTML+CSS' 카테고리의 다른 글
| (SEO 최적화를 위한) 잊고 있는 HTML 태그 10가지 (0) | 2024.05.27 |
|---|---|
| [CSS] 이미지 스프라이트 (Image Sprite) (0) | 2024.05.09 |
| [CSS] IR 기법 (0) | 2024.05.08 |
| 앞으로 써먹어야 할 2022 CSS 최신 기술 모음 (0) | 2022.11.25 |