<!-- ダイアログとして使用する例 -->
<button onClick={openDialog()}>Open Dialog</button>
<dialog id="dialog">
  <p>This is dialog.</p>
  <button onClick={closeDialog()}>close</button>
</dialog>
<!-- モーダルとして使用する例 -->
<button onClick={openModal()}>Open Modal</button>
<dialog id="modal">
  <p>This is modal.</p>
  <button onClick={closeModal()}>close</button>
</dialog>
#modal::backdrop {
  background-color: rgba(255,0,0,0.2);
}
// ダイアログとして開く関数
const openDialog = () => {
  document.getElementById('dialog').show();
}
const closeDialog = () => {
  document.getElementById('dialog').close();
}
// モーダルとして開く関数
const openModal = () => {
  document.getElementById('modal').showModal();
}
const closeModal = () => {
  document.getElementById('modal').close();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.