Alpine.jsでdialogタグを制御する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ1の9日目を担当します。

qiita.com

今回はAlpine.jsでdialogタグを制御する方法をご紹介します。

dialogタグとは
Alpine.jsで制御する
- コンテンツの外側を押下しても閉じられるようにする
まとめ

dialogタグとは

dialogタグはHTML標準のダイアログボックス要素です。2022年3月にFirefoxでもサポートされ、広く使用できるようになりました。

HTML標準ということで、表示されたダイアログは自動的に最上位のレイヤーに移動するためz-indexの調整が不要であったり、escキーで閉じられたりと多くのメリットがあります。

一方で制御にはJavaScriptが必要です。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen.

<button id="show-btn" type="button">ダイアログを表示</button>

<dialog id="dialog">
  <p>ダイアログです</p>
  <button id="close-btn" type="button">閉じる</button>
</dialog>

<script>
  const showTriggerBtn = document.getElementById("show-btn");
  const closeTriggerBtn = document.getElementById("close-btn");
  const dialog = document.getElementById("dialog");

  showTriggerBtn.addEventListener("click", () => {
    dialog.showModal();
  });

  closeTriggerBtn.addEventListener("click", () => {
    dialog.close();
  });
</script>

Alpine.jsで制御する

Alpine.jsを使用して制御すると以下のようになります。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen.

<div x-data>
  <button @click="$refs.dialog.showModal()" type="button">ダイアログを表示</button>

  <dialog x-ref="dialog">
    <p>ダイアログです</p>
    <button @click="$refs.dialog.close()" type="button">閉じる</button>
  </dialog>
</div>

$refsを使用してdialogタグのDOMノードにアクセスしてshowModal()やclose()を実行しています。

$refsについては以下の記事も合わせてご覧ください。

tech.excite.co.jp

コンテンツの外側を押下しても閉じられるようにする

先の例では「閉じる」ボタンを押下しないと非表示にできませんが、コンテンツの外側を押下しても非表示にできるようにすると操作性が向上します。

See the Pen Alpine.jsでdialogを制御（外側押下でも非表示に） by AyumuSaito (@ayumusaito-excite) on CodePen.

<div x-data>
  <button @click="$refs.dialog.showModal()" type="button">ダイアログを表示</button>

  <dialog @click.self="$refs.dialog.close()" x-ref="dialog">
    <!-- ダイアログのスタイルは.dialog-contentに当てる -->
    <div class="dialog-content">
      <p>ダイアログです</p>
      <button @click="$refs.dialog.close()" type="button">閉じる</button>
    </dialog>
    </div>
</div>