.addEventListener

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

2022年6月25日 9分

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

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

.addEventListener
クリックで検索フォームがモーダルで表示されるサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.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で使用しているテーマのものをそのまま利用しています。