検索フォーム付きモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

検索フォーム付きモーダルウインドウの作り方

検索フォーム付きモーダルウインドウをHTML・CSS・JavaScriptで作る方法を紹介します。ボタンをクリックするとモーダルウインドウが開き、入力したキーワードでJavaScript内に用意した項目を絞り込めるサンプルです。検索画面を常時表示せず、必要なときだけ呼び出したい場合に利用できます。

このサンプルでは、モーダルの開閉、検索フォームの送信、キーワードに一致する項目の表示、該当項目がない場合のメッセージ表示を実装しています。商品一覧や記事一覧、管理画面、会員サイトなど、ページを移動せずに簡単な検索機能を提供したい場面に適しています。

現在のコードはJavaScript内のデータを検索するフロントエンド用サンプルです。PHPと組み合わせる場合は、フォームの送信先へ検索処理を行うPHPファイルを指定し、データベースやCSVなどから検索結果を取得する構成へ変更できます。モーダルの見た目や開閉処理はそのまま利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

検索フォーム付きモーダル

ボタンをクリックすると検索フォーム付きモーダルウインドウを表示します。

「検索フォームを表示」をクリックし、「モーダル」「タブ」などのキーワードを入力して検索結果を確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>検索フォーム付きモーダルウインドウ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!--
  ==================================================
  このサンプルについて
  ==================================================

  このサンプルはHTML・CSS・JavaScriptのみで動作し、
  JavaScript内に用意した項目をキーワードで絞り込みます。

  PHPと組み合わせて実際の検索処理を行う場合

  ・form要素のaction属性へ検索処理を行うPHPを指定する
  ・method属性をgetまたはpostへ変更する
  ・検索入力欄のname="keyword"をPHPで受け取る

  例

  action="search.php"
  method="get"

  PHP側では検索キーワードの受け取り、
  データベースやCSVからの検索、
  検索結果の生成などを実装してください。

  JavaScriptによるサンプル検索とPHP検索を
  同時に使用しない場合は、
  script.js内のフォーム送信処理を調整してください。
  ==================================================
  -->

  <!-- 検索モーダルを開く操作エリア -->
  <div class="search-form-modal-window_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="search-form-modal-window_title">
      検索フォーム付きモーダル
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="search-form-modal-window_text">
      ボタンをクリックすると検索フォーム付きモーダルウインドウを表示します。
    </p>

    <!-- 検索モーダルを開くボタン -->
    <button
      class="search-form-modal-window_open"
      type="button"
      data-search-form-modal-open>
      検索フォームを表示
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="search-form-modal-window_overlay"
    data-search-form-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="search-form-modal-window_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="search-form-modal-window-title">

      <!-- モーダルを閉じるボタン -->
      <button
        class="search-form-modal-window_close"
        type="button"
        data-search-form-modal-close
        aria-label="閉じる">
        ×
      </button>

      <!-- モーダルタイトル -->
      <div
        class="search-form-modal-window_heading"
        id="search-form-modal-window-title">
        サイト内検索
      </div>

      <!-- 検索フォーム -->
      <form
        class="search-form-modal-window_form"
        action="#"
        method="get"
        data-search-form-modal-form>

        <!-- 検索キーワード入力欄 -->
        <input
          class="search-form-modal-window_input"
          type="search"
          name="keyword"
          placeholder="キーワードを入力"
          aria-label="検索キーワード"
          data-search-form-modal-input>

        <!-- 検索ボタン -->
        <button
          class="search-form-modal-window_submit"
          type="submit">
          検索
        </button>

      </form>

      <!-- JavaScriptで検索結果を追加する一覧 -->
      <ul
        class="search-form-modal-window_results"
        data-search-form-modal-results>
      </ul>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには検索フォーム付きモーダルウインドウの構造、CSSにはフォームやモーダルのデザイン、JavaScriptにはモーダルの開閉処理と検索結果の表示処理を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。

PHPと組み合わせて実際の検索機能を作成する場合は、index.htmlのform要素に送信先PHPを指定し、method属性をgetまたはpostへ変更します。検索キーワードにはname属性が設定されているため、PHP側では検索文字列として受け取れます。データベース検索やCSV検索などの処理は、送信先PHPで別途実装してください。

このサンプルは検索フォーム付きモーダルウインドウの表示と検索画面のUIを確認するためのコードです。PHPと組み合わせる場合も、HTML・CSS・JavaScriptの構成はそのまま利用でき、フォームのaction属性とmethod属性を変更するだけで検索処理へ接続できます。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
検索フォーム付きモーダルウインドウのHTML構造を記述します。タイトル、説明文、検索フォーム、検索ボタン、検索結果表示エリアを配置しています。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をgetまたはpostへ変更します。検索キーワードはname属性を利用してPHP側で受け取れます。

style.css
モーダルウインドウ全体のデザインを管理します。背景色、入力欄、検索ボタン、検索結果一覧、余白、角丸、影などを自由に変更できます。PHPと組み合わせた場合でもそのまま利用できます。

script.js
モーダルを開く処理、閉じる処理、背景クリックによる閉じる処理、デモ用検索結果の表示処理を管理します。実際の検索処理やデータ取得は行いません。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。「検索フォームを表示」をクリックすると検索フォーム付きモーダルウインドウが表示されます。

PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。

action=”#”
method=”get”

を、

action=”search.php”
method=”get”

または

action=”search.php”
method=”post”

へ変更します。search.phpでは検索キーワードを受け取り、CSVやデータベースなどの検索処理を実装してください。

カスタマイズできる内容
index.htmlではタイトル、説明文、検索フォーム、プレースホルダー、検索ボタン、送信先PHPを変更できます。style.cssではモーダルの横幅、背景色、入力欄のサイズ、検索ボタン、検索結果一覧、余白、角丸、影などを変更できます。script.jsでは検索対象データや検索処理、モーダル開閉処理を編集できます。

数値調整
style.cssのmax-widthを変更するとモーダルの最大横幅が変わります。paddingを変更するとモーダル内部の余白が変わります。gapを変更するとフォーム項目同士の間隔が変わります。animation:0.3s;の0.3秒を変更するとモーダル表示アニメーションの速度が変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@mediaを使用してレスポンシブ対応しています。画面サイズに応じてモーダルや入力欄のサイズ、余白が自動調整されるため、スマートフォン・タブレット・PCでも利用できます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント