JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.addEventListenerクリックで検索フォームのモーダル

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener

JavaScriptの.addEventListenerクリックで検索フォームのモーダル

JavaScriptの.addEventListenerクリックで検索フォームのモーダル

ユーザーが検索フォームに検索条件を入力して「検索」ボタンを押すと、一覧画面に表示される。Webサイトのどのシーンでも当たり前に活用されている「検索フォーム」ですが、この記事では、そんな検索フォームをボタンクリックで「モーダル」表示させてみます。

是非参考にしてみてください。

.addEventListener

JavaScriptの .addEventListener は、指定した要素のイベント毎に呼び出される関数を設定するメソッドです。

document.getElementById('element').addEventListener('click', () => {
// ここに処理内容
});
かかかず
かかかず

めちゃめちゃ便利なメソッドです。

設定できる「イベント」は色々あります。この記事では、ボタンがトリガーになる要素にしてモーダルで検索ふぉーむが表示される形です。

クリックで検索フォームがモーダルで表示されるサンプル

早速サンプルです。

「モーダルを表示」のボタンをクリックすると、薄黒の背景色と一緒に検索フォームが中央に表示されます。

表示されたモーダルは、検索フォーム下部の「✖️」か薄黒い背景をクリックすると、非表示になります。

実装の手順と方法

手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

まずはじめに、設置したい表示したい場所へコードを記述します。

<!-- モーダルのボタン -->
<button id="modalView">モーダルを表示</button>
<!-- モーダルのボタン -->

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <!-- ここに検索フォーム -->
    <form role="search" method="get" id="searchform" class="searchform" action="https://dubdesign.net/">
    <div>
        <input type="search" placeholder="サイト内検索" id="s" class="searchform__input" name="s" value="" />
        <button type="submit" id="searchsubmit" class="searchform__submit"><i class="fa fa-search"></i>
        </button>
    </div>
</form>
    <!-- ここまで検索フォーム -->
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>
JavaScriptの記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

document.getElementById('modalView').addEventListener('click', () => {
const modalbtn = document.getElementById('firstTimeModal');
     modalbtn.classList.add('is-show');
});

document.getElementById('js-black-bg').addEventListener('click', () => {
const modalClose = document.getElementById('firstTimeModal');
     modalClose.classList.remove('is-show');
});
document.getElementById('modalCloseCloss').addEventListener('click', () => {
const modalClose = document.getElementById('firstTimeModal');
     modalClose.classList.remove('is-show');
});
CSSを記述

最後にCSSを記述して、見た目を整えます。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 2;
    border-radius: 3px;
    max-width: 320px;
    width: 100%;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 50%;
    bottom: -55px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transform: translateX(-50%);
    background: #FFF;
    border-radius: 9999px;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #707070;
    line-height: 1;
    width: 1.6rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}

.popup-inner input.searchform__input {
    margin: 0;
}

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは、大きく分けて「モーダルを表示させるボタン」と「ボタンクリックで表示されるモーダル」の2種類です。

<!-- モーダルのボタン -->
<button id="modalView">モーダルを表示</button>
<!-- モーダルのボタン -->

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <!-- ここに検索フォーム -->
    <form role="search" method="get" id="searchform" class="searchform" action="https://dubdesign.net/">
    <div>
        <input type="search" placeholder="サイト内検索" id="s" class="searchform__input" name="s" value="" />
        <button type="submit" id="searchsubmit" class="searchform__submit"><i class="fa fa-search"></i>
        </button>
    </div>
</form>
    <!-- ここまで検索フォーム -->
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

モーダルで表示される検索フォームには、WordPressで標準の検索フォームを使用しています。ので、WordPress以外の検索フォームを設置する場合は、<!-- ここに検索フォーム --> のコメントアウトの中に任意の検索フォームをいれましょう。

WordPressの検索フォーム

WordPressの検索フォームをモーダルで表示させるには、検索フォームのPHPをショートコード化してHTMLに記述させるのが簡単です。WordPressの検索フォームをショートコード化する方法は、以下の記事をご覧ください。

リンク プラグインなしで記事ページや固定ページに検索フォームを表示するスニペット

JavaScript

JavaScriptは大きく分けて3つで、「モーダルを表示させるボタン」と「モーダルの背景をクリックした時」「モーダルの✖️をクリックした時」でそれぞれ処理内容を記述します。

document.getElementById('modalView').addEventListener('click', () => {
const modalbtn = document.getElementById('firstTimeModal');
     modalbtn.classList.add('is-show');
});

document.getElementById('js-black-bg').addEventListener('click', () => {
const modalClose = document.getElementById('firstTimeModal');
     modalClose.classList.remove('is-show');
});
document.getElementById('modalCloseCloss').addEventListener('click', () => {
const modalClose = document.getElementById('firstTimeModal');
     modalClose.classList.remove('is-show');
});

.addEventListener のイベントが、3つとも分離した形で記述しているので、コードを見るだけでも流れが理解しやすいと思います。

CSS

CSSでモーダルと、背景の見た目を作るので多少コード量は多めです。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 2;
    border-radius: 3px;
    max-width: 320px;
    width: 100%;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 50%;
    bottom: -55px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transform: translateX(-50%);
    background: #FFF;
    border-radius: 9999px;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #707070;
    line-height: 1;
    width: 1.6rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}

.popup-inner input.searchform__input {
    margin: 0;
}
かかかず
かかかず

検索フォームのスタイルは、WordPressで使用しているテーマのものをそのまま利用しています。

さいごに

当サイトで使用しているWordPressテーマ「SANGO」でも、モーダルで検索フォームが表示される機能がありますが、チェックボックスを絡めたCSSで実装されています。

かかかず
かかかず

色々できて、ホントCSSってすごいすよね。

ので、CSSでも当記事のJavaScriptのどちらでも実装できるので、設置する場所に応じて使い分けてみてください。