<dialog>

  <h1>

    Hello world from the dialog

  </h1>

  <div>

    <button class="close">

      Dialog 닫기

    </button>

  </div>

</dialog>

​

<div>

  <p>

    <i>dialog.show()</i> 절대 위치의 모달이 아닌 dialog를 엽니다.

  </p>

  <button class="open">

    Dialog 열기

  </butto>

</div>

​

​

body {

 height: 10em;

}

​

div {

  display: flex;

  flex-direction: column;

  align-items: center;

}

​

dialog {

  top: 100px;

}

​

p {

  text-align: center;

}

​

button {

  width: 100px;

  height: 30px;

}

const dialog = document.querySelector('dialog');

​

const openButton = document.querySelector('button.open')

​

openButton.addEventListener('click', () => {

  dialog.show();

})

​

const closeButton = document.querySelector('button.close')

​

closeButton.addEventListener('click', () => {

  dialog.close();

})

​

​