Month: December 2021

モーダルダイアログを表示する

モーダルダイアログを表示する場合、dialog要素に対するDOMオブジェクト（HTMLDialogElementオブジェクト）のshowModalメソッドを呼び出します。ダイアログを閉じる場合はcloseメソッドを呼び出します。

<p><button type="button" onclick="document.getElementById('ex-dialog-1').showModal()">詳細を表示する</button></p>
<dialog id="ex-dialog-1" aria-labelledby="ex-dialog-1-title">
  <h3 id="ex-dialog-1-title">詳細</h3>
  <p>詳細は○○です。</p>
  <p><button type="button" onclick="this.closest('dialog').close();">閉じる</button></p>
</dialog>

お使いの環境はdialog要素に対応していないため、上の例でダイアログの内容がそのまま表示されています。

なお、showModalメソッドではなくshowメソッドを使うと、モードレスダイアログとして表示されます。

dialog要素とform要素を組み合わせる

ダイアログを閉じるのにHTMLのフォーム機能を使うこともできます。form要素のmethod属性にdialogという値を指定すると、フォーム送信の挙動が「送信先に移動する」のではなく「ダイアログを閉じる」になります（HTTP要求は発生しません）。

<p><button type="button" onclick="document.getElementById('ex-dialog-2').showModal()">詳細を表示する</button></p>
<dialog id="ex-dialog-2" aria-labelledby="ex-dialog-2-title">
  <form method="dialog">
    <h3 id="ex-dialog-2-title">詳細</h3>
    <p>詳細は○○です。</p>
    <p><button type="submit">閉じる</button></p>
  </form>
</dialog>

HTMLのフォーム検証機能を使う

フォーム機能を使えるということは、フォーム検証機能も使えるということです。次の例では、入力欄に何か入力しないと「確定する」ボタンからダイアログを閉じられません。

<p><button type="button" onclick="document.getElementById('ex-dialog-3').showModal()">名前を入力する</button></p>
<dialog id="ex-dialog-3" aria-labelledby="ex-dialog-3-title">
  <form method="dialog">
    <h3 id="ex-dialog-3-title">名前を入力</h3>
    <p><label>名前: <input type="text" required></label></p>
    <p><button type="submit">確定する</button></p>
  </form>
</dialog>

なお、ブラウザによってはダイアログ上でEscキーを押下するとキャンセル操作として扱われ、何も入力していなくてもダイアログを閉じられます。

フォーム検証機能を迂回する

フォーム検証をせずにダイアログを閉じたいというときには、いくつか手段があります。

<p><button type="button" onclick="document.getElementById('ex-dialog-4').showModal()">名前を入力する</button></p>
<dialog id="ex-dialog-4" aria-labelledby="ex-dialog-4-title">
  <form method="dialog">
    <h3 id="ex-dialog-4-title">名前を入力</h3>
    <p><label>名前: <input type="text" required></label></p>
    <p>
      <button type="submit" formnovalidate>キャンセル</button>
      <button type="submit">確定する</button>
    </p>
  </form>
</dialog>

<button type="button" onclick="this.closest('dialog').close();">キャンセル</button>
<button type="submit">確定する</button>

<button type="button" onclick="this.form.submit();">キャンセル</button>
<button type="submit">確定する</button>

どのボタンが実行されたか判別する

送信ボタンを使ってダイアログを閉じた場合、その送信ボタンのvalueプロパティの値が、ダイアログのreturnValueプロパティの値として設定されます。

<p><button type="button" onclick="document.getElementById('ex-dialog-5').showModal()">名前を入力する</button></p>
<p id="ex-dialog-5-output"></p>
<dialog id="ex-dialog-5" aria-labelledby="ex-dialog-5-title"
    onclose="document.getElementById('ex-dialog-5-output').textContent = `「${this.returnValue}」ボタンが実行されました。`;">
  <form method="dialog">
    <h3 id="ex-dialog-5-title">名前を入力</h3>
    <p><label>名前: <input type="text" required></label></p>
    <p>
      <button type="submit" value="cancel" formnovalidate>キャンセル</button>
      <button type="submit" value="enter">確定する</button>
    </p>
  </form>
</dialog>

ダイアログのcloseメソッドの引数に値を指定すると、ダイアログを閉じることとreturnValueプロパティにその値を設定することが一度にできます。

<button type="button" value="cancel" onclick="this.closest('dialog').close(this.value);">キャンセル</button>
<button type="submit" value="enter">確定する</button>

終わりに

以上、HTML仕様とWebブラウザの進歩により、様々な機能を簡単に利用できるようになるという話でした。

はてなでは、Web技術を語らいサービスへの活用を探る仲間を募集しています。

hatenacorp.jp