[HTML] <dialog> 태그

<dialog>

 

---

<dialog> HTML element는 대화 상자 또는 경고, 검사, 하위창 같은 인터랙티브한 컴포넌트를 나타낸다.

 

 

Attributes

<dialog open>
  <p>Hello</p>
</dialog>

 

opne 속성은 dialog가 활성 상태이며 상호작용할 수 있음을 나타낸다.

 

 

 

method

---

<button onclick="showDialog()">dialog 열기</button>

<dialog id="dialog">
    <p>Hellow</p>
    <button onclick="closeDialog()">닫기</button>
</dialog>

<script>
    const dialog = document.getElementById("dialog"); 

    const showDialog = () => { 
      // dialog.show(); or dialog.showModal();
    } 

    const closeDialog = () => { 
      dialog.close(); 
    } 
</script>

 

show() : dialog  표시. 다른 요소(dialog 외의 요소)와 상호작용 할 수 있다.

showModal() : dialog  표시. dialog 외의 요소와 상호작용이 금지된다.

close() : dialog 닫음.

 

 

 

Usage notes

---

• method="dialog" 특성을 사용한 <form> 요소는 제출 시 dialog를 닫게된다. 이 때, dialog의 returnValue  속성은 폼을 제출할 때 사용한 버튼의 value로 설정된다.
• CSS ::backdrop 를 사용하면, showModal() 메서드를 사용해 활성화한 <dialog> 요소의 뒤에 스타일을 적용할 수 있다. ex) dialog가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용

 

 

 

 

---

 

<dialog>: 대화 상자 요소 - HTML: Hypertext Markup Language | MDN