CodePen Embed - dialog要素でモーダルを表示

<button type="button" data-modal-open="modal" aria-controls="modal">
  モーダル表示
</button>

<dialog id="modal" aria-labelledby="modal-title">
  <div>
    <h2 id="modal-title">
      モーダルタイトル
    </h2>
    <div>
      モーダル内の内容
    </div>
  </div>
  <form method="dialog">
    <button type="submit">
      閉じる
    </button>
  </form>
</dialog>

document.querySelector('[data-modal-open]').addEventListener('click', () => {
  document.getElementById('modal').showModal();
});

This Pen is owned by ボヘミアン on CodePen.

See more by @bohe on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.