HTMLlt;dialog> 요소 사용 방법

<대화상자>의 기능을 살펴보겠습니다. 좀 더 자세히.

사용의 핵심 측면

HTML <대화상자> 태그는 팝업 또는 모달 창으로 작동할 수 있는 기본적으로 숨겨진 대화 상자를 만듭니다.

팝업은 쿠키 메시지, 사라지는 토스트 알림, 툴팁 또는 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴 요소와 같은 간단한 알림을 표시하는 데 자주 사용됩니다.

모달 창은 사용자 확인이 필요한 알림 및 경고, 복잡한 대화형 양식, 이미지나 동영상용 라이트박스 등 사용자가 특정 작업에 집중하는 데 도움이 됩니다.

팝업은 페이지와의 상호 작용을 방해하지 않는 반면 모달 창은 문서를 오버레이하고 배경을 어둡게 하며 다른 작업을 차단합니다. 이 동작은 추가 스타일이나 스크립트 없이 작동합니다. 유일한 차이점은 대화 상자를 여는 데 사용되는 방법입니다.

대화창 열기 방법

— 팝업:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— 모달 창:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

두 경우 모두 <대화상자> 태그는 open 속성을 true로 설정합니다. 직접 설정하면 대화 상자가 모달이 아닌 팝업으로 열립니다. 모달 창을 렌더링하려면 적절한 방법을 사용해야 합니다. 처음 열리는 팝업을 생성하는 데에는 JavaScript가 필요하지 않습니다.

<dialog open>Hi, I'm a popup!</dialog>

사용해 보세요:

• .show() 메소드를 사용하여 팝업 열기: https://codepen.io/alexgriss/pen/zYeMKJE
• .showModal() 메서드를 사용하여 모달 창 열기: https://codepen.io/alexgriss/pen/jOdQMeq
• 열기 속성 직접 변경: https://codepen.io/alexgriss/pen/wvNQzRB

대화 상자 창 닫기 접근 방식

대화상자 창은 어떻게 열렸든 상관없이 같은 방식으로 닫힙니다. 팝업 또는 모달 창을 닫는 몇 가지 방법은 다음과 같습니다.

— .close() 메소드 사용:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— method="dialog" 속성을 사용하여 양식에서 제출 이벤트를 트리거합니다.

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— Esc 키를 누르면 다음과 같습니다.

Esc로 닫기는 모달 창에서만 작동합니다. 먼저 취소 이벤트를 트리거한 다음 닫아 양식의 저장되지 않은 변경 사항에 대해 사용자에게 쉽게 경고할 수 있습니다.

사용해 보세요:

• close 메서드로 대화 상자 닫기: https://codepen.io/alexgriss/pen/GRzwjaV
• 제출 양식을 통해 대화 상자 닫기: https://codepen.io/alexgriss/pen/jOdQVNV
• Esc 키로 모달 창 닫기: https://codepen.io/alexgriss/pen/KKJrNKW
• Esc로 모달 창이 닫히는 것을 방지하기: https://codepen.io/alexgriss/pen/mdvQObN

종료 시 반환 값

method="dialog" 속성을 사용하여 양식으로 대화 상자를 닫을 때 제출 버튼의 값을 캡처할 수 있습니다. 이는 클릭한 버튼에 따라 다른 작업을 트리거하려는 경우 유용합니다. 값은 returnValue 속성에 저장됩니다.

사용해 보세요: https://codepen.io/alexgriss/pen/ZEwmBKx

작동 방식을 자세히 살펴보세요.

대화상자 창의 메커니즘과 브라우저 구현에 대한 세부정보를 자세히 살펴보겠습니다.

팝업의 메커니즘

<대화상자> 열기 .show() 또는 open 속성을 사용하여 팝업으로 DOM에서 position:absolute로 자동 배치합니다. 여백 및 테두리와 같은 기본 CSS 스타일이 요소에 적용되며 창 내부의 첫 번째 포커스 가능한 항목은 자동 초점 속성을 통해 자동으로 포커스를 받습니다. 페이지의 나머지 부분은 대화형으로 유지됩니다.

모달 창의 메커니즘

모달 창은 팝업보다 더 복잡한 방식으로 설계되고 작동합니다.

문서 오버레이

.showModal()을 사용하여 모달 창을 열면

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>