..

HTML dialog tag

긱뉴스에서 공유된 아티클을 보고 dialog 태그를 사용하면 앞으로 개발할 때 모달을 직접 구현하지 않아도 되지 않을까 하여 간단한 예시를 만들어 테스트해봤습니다.

모달 구현 시 직접 구현하는 경우를 많이 본것 같은데 아마 커스터마이징 목적이었을것 같습니다만 간단하게 구현할때는 편리할것 같습니다.

예시

코드

<html>
    <head>
        <title>Dialog test</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>Hello!</h1>
        <button id="modal-button" data-modal="modal">Open a modal</button>
        <dialog id="modal">
            <h2>I'm dialog. Who are you?</h2>
            <button id="close-dialog">close</button>
        </dialog>
        <script>
            const button = document.getElementById('modal-button')
            button.addEventListener('click', (event) => {
                const modal = document.getElementById('modal')
                modal.showModal()
            })

            const closeButton = document.getElementById('close-dialog')
            closeButton.addEventListener('click', (event) => {
                const modal = event.target.closest('dialog')
                modal.close()
            })
        </script>
    </body>
    <style>
        dialog {
            background-color: aqua;
        }

        dialog::backdrop {
            background-color: blueviolet 
        }
    </style>
</html>

실행 예시

메인 화면 HTML 초기 화면.

dialog 오픈 “Open a modal” 버튼 클릭 시 나오는 화면. backdrop 에 들어간 배경 색이 이 모달 뒤의 배경 색을 변경한 것을 확인할 수 있다.