minstudio

네이티브 모달 팝업 (<dialog>)

과거에는 브라우저 한가운데에 팝업 창(모달)을 띄우고 뒤 배경을 어둡게 만드려면 복잡한 HTML, CSS 떡칠과 JavaScript 라이브러리가 필요했습니다. 하지만 이제 HTML5 표준 <dialog> 태그 하나로 이 모든 것이 순정(Native)으로 해결됩니다!

🛡️ 알아서 배경을 막아주는 든든한 방패막이

JavaScript에서 .showModal() 함수로 창을 열면, 브라우저가 알아서 뒷 배경의 클릭을 막아버리고 오직 팝업에만 집중(초점 가두기)하도록 만들어줍니다. 게다가 ESC 키를 누르면 자동으로 닫히는 접근성까지 기본 장착되어 있습니다.

요소 및 속성설명
<dialog>모달 팝업을 정의하는 부모 컨테이너. 기본적으로는 화면에 보이지 않습니다.
.showModal()팝업을 최상단에 띄우고, 뒷 배경 요소들의 조작을 차단합니다. (접근성 완벽 지원)
form method="dialog"모달 내부 폼에서 이 속성을 쓰면, 전송 버튼 클릭 시 폼이 제출되는 대신 창이 예쁘게 닫힙니다.
::backdrop (CSS)모달이 떴을 때 뒤에 깔리는 반투명한 검은색 배경을 꾸밀 때 사용하는 가상 요소입니다.
 
<!-- 대화상자 선언 -->
<dialog id="myModal">
    <h3>정말 삭제하시겠습니까?</h3>
    <p>삭제된 데이터는 복구할 수 없습니다.</p>
    
    <!-- form method="dialog"를 쓰면 버튼 클릭 시 모달이 자동으로 닫힙니다 -->
    <form method="dialog">
        <button value="cancel">취소</button>
        <button value="confirm" id="confirmBtn">삭제</button>
    </form>
</dialog>

<!-- 팝업 열기 버튼 -->
<button onclick="document.getElementById('myModal').showModal()">
    삭제하기 팝업 열기
</button>

<!-- 스크립트 예시 (참고용) -->
<script>
    const modal = document.getElementById('myModal');
    modal.addEventListener('close', () => {
        console.log('선택한 결과: ', modal.returnValue); // "cancel" 또는 "confirm"
    });
</script>
실행 결과
네이티브 모달 팝업 (<dialog>) | Minstudio