htmxを使った簡単モーダル表示のテクニック：JavaScript不要

モーダルウィンドウは、現在のページコンテンツの上に重ねて表示されるUI要素です。
通常、モーダルウィンドウを実装するには、JavaScriptを使った複雑な処理が必要でした。

しかし、htmxを使えば、シンプルなHTMLの属性だけでモーダルウィンドウを実現できます。
この記事では、htmxを使ってモーダルウィンドウを実装する方法を詳しく解説します。

本記事の内容

モーダルウィンドウのHTML構造
モーダルコンテンツの動的読み込み
モーダルウィンドウのスタイリング
アクセシビリティの考慮
サンプルコード
まとめ

それでは、上記に沿って解説していきます。

モーダルウィンドウのHTML構造

htmxについてよくわからない場合は、次の記事からご覧ください。

まず、モーダルウィンドウのHTML構造を定義します。
モーダルを表示するボタンと、モーダルコンテンツを格納するコンテナを以下のように配置します。

<button hx-get="modal_content.php" hx-target="#modal-container" hx-swap="outerHTML">
  モーダルを表示
</button>

<div id="modal-container"></div>

モーダル表示ボタンには、hx-get、hx-target、hx-swapの属性を設定します。
hx-getで指定したPHPファイルからモーダルコンテンツを取得し、hx-targetで指定したコンテナ要素に挿入します。

また、hx-swapを”outerHTML”に設定することで、コンテナ要素自体がモーダルコンテンツに置き換わります。

モーダルコンテンツの動的読み込み

次に、PHPを使ってモーダルコンテンツを動的に生成します。
modal_content.phpというPHPファイルを作成し、以下のようなコードを記述します。

<?php
echo <<<HTML
<div id="modal-container" style="display: flex; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center;">
    <div id="modal-content">
        <h2>モーダルコンテンツ</h2>
        <p>これはモーダルで表示されるコンテンツです。</p>
        <button onclick="document.getElementById('modal-container').style.display='none';">閉じる</button>
    </div>
</div>
HTML;
?>

このPHPファイルでは、モーダルウィンドウのHTML構造を出力しています。
モーダルコンテンツには、閉じるボタンを配置し、クリックされたらモーダルを非表示にするようにしています。

htmxは、モーダル表示ボタンがクリックされたときに、modal_content.phpを呼び出してモーダルコンテンツを取得します。
取得したコンテンツは、#modal-containerに挿入され、モーダルウィンドウが表示されます。

モーダルウィンドウのスタイリング

モーダルウィンドウを適切にスタイリングすることで、ユーザーにとって使いやすく魅力的なUIを作成できます。
以下のようなCSSを使って、モーダルウィンドウのスタイルを定義します。

#modal-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}
#modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

　#modal-containerは、初期状態では非表示にしておき、モーダルが表示されるときにflexboxを使って中央に配置します。
背景には、半透明の黒を設定し、モーダルコンテンツが強調されるようにします。

　#modal-contentには、白背景とパディング、丸み付きの角を指定して、視認性を高めます。

アクセシビリティの考慮

モーダルウィンドウを実装する際は、アクセシビリティにも配慮する必要があります。
キーボード操作でモーダルを閉じられるようにするため、閉じるボタンにはタブフォーカスを受ける要素を配置します。

また、モーダルが表示されている間は、背景のコンテンツをスクリーンリーダーから隠すことを検討してください。

サンプルコード

以上の内容を組み合わせた完全なサンプルコードは上記の通りです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>HTMX モーダルデモ</title>
   <script src="https://unpkg.com/htmx.org"></script>
   <style>
       #modal-container {
           display: none;
           position: fixed;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.5);
           align-items: center;
           justify-content: center;
       }
       #modal-content {
           background-color: white;
           padding: 20px;
           border-radius: 5px;
       }
   </style>
</head>
<body>

<button hx-get="modal_content.php" hx-target="#modal-container" hx-swap="outerHTML">
 モーダルを表示
</button>

<div id="modal-container"></div>

</body>
</html>

modal_content.php

<?php
echo <<<HTML
<div id="modal-container" style="display: flex; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center;">
    <div id="modal-content">
        <h2>モーダルコンテンツ</h2>
        <p>これはモーダルで表示されるコンテンツです。</p>
        <button onclick="document.getElementById('modal-container').style.display='none';">閉じる</button>
    </div>
</div>
HTML;
?>