モーダルで検索フォームをポップアップで表示

迷える黒猫くん

クリックしたらモーダルウィンドウが立ち上がって検索フォームを表示するページを作りたいニャ

ボタンをクリックしたらモーダルウィンドウが立ち上がって検索フォームを表示するページを実装してみましょう。
基本的には以前紹介したモーダルウィンドウの実装方法と変わりません。

モーダルウィンドウの場合複数のモーダルを想定したり、背景をロックするなど考慮することが多く、なかなか複雑になってしまったのですが、検索画面を立ち上げた場合そこに何か入力するアクションが想定されるため、背景のロックは省きました。そのためコード自体はかなりシンプルなものとなっております。

今回実装するページのデモはこちらになります。

ヘッダーの右端にある虫眼鏡マークをクリックするとモーダルウィンドウが立ち上がり検索フォームも立ち上がります。今回見た目の実装デモなので検索フォームは作動していません。

コード
ちょこっと解説

コード

HTML

検索フォームのモーダルに必要なコードはheaderで完結するのでheaderのみ抜き出します。

<header>
    <div class="header-inner">
        <h1>
            ILLRICHT SKATE SHOP
        </h1>

        <div class="navi-area">
            <navi>
                <ul class="header-navi">
                    <li><a href="">カテゴリー<br><span>Category</span></a></li>
                    <li><a href="">当サイトについて<br><span>AboutMe</span></a></li>
                    <li><a href="">コンタクト<br><span>ContactUs</span></a></li>
                    <li><a href="">レベル1<br><span>Level1</span></a></li>
                    <li><a href="">アクセス<br><span>Access</span></a></li>
                </ul>
            </navi>
            <button type="submit" class="header-serch"><i class="fas fa-search"></i>search</button>
        </div>
    </div>
    <div class="serch-wrapper">
        <div class="serch-bg"></div>
        <div class="header-serch-content">
            <form action="" class="header-serch-form">
                <p>キーワードで記事を検索</p>
                <input type="text" name="" id="" placeholder="検索する" class="header-serch-input">
                <button type="submit" class="header-serch-btn"><i class="fas fa-search"></i></button>
                <span class="close-btn"><i class="fas fa-times"></i>close</span>
            </form>
        </div>
    </div>
</header>

CSS

ここも今回のモーダルの挙動に必要なところだけ抜き出します。

.navi-area {
  display: flex;
  justify-content: space-between;
}
.header-serch {
  color: #fff;
  opacity: 0.9;
  background-color: #FE7F2D;
  width: 55px;
  height: 60px;
  font-size: 1.2rem;
  font-family: 'Lobster', sans-serif;
  text-align: center;
}
.header-serch i {
  display: block;
  font-size: 2.4rem;
}
.serch-wrapper {
  display: none;
  position: relative;
  z-index: 2;
}
.serch-bg {
  background-color: rgba(43, 46, 56, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}
.header-serch-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 700px;
  width: calc(650 / 768 * 100%);
  height: 200px;
  z-index: 3;
  color: #fff;
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-serch-content form {
  width: 100%;
}
.header-serch-input {
  background-color: #fff;
  width: 100%;
  height: 65px;
  margin: 0 auto;
  border: 3px solid #cacaca;
  padding: 10px;
  font-size: 1.8rem;
  color: #333;
}
.header-serch-btn {
  position: absolute;
  top: 63px;
  right: 15px;
  color: #333;
  font-size: 2.2rem;
}
.close-btn {
  font-size: 2.2rem;
  font-family: 'Lobster', sans-serif;
  text-transform: uppercase;
  display: block;
  width: fit-content;
  margin: 35px auto 0;
  cursor: pointer;
}
.close-btn i {
  font-size: 3rem;
  margin-right: 10px;
  vertical-align: bottom;
}

JavaScript

$('.header-serch').on('click', function () {
  $('.serch-wrapper').fadeIn(500);
});

$('.close-btn, .serch-bg').on('click', function () {
  $('.serch-wrapper').fadeOut(500);
});

ちょこっと解説

クリックしら何かをするという基本的な２種類の動きで完結します。
背景として設定した「.serch-bg」とフォームのコンテンツ「.header-serch-content」を並列において双方に z-index を指定して背景より前にフォームのコンテンツを被せてます。クリックで出たり消えたりする要素はその２つを共に包括する入れ物「.serch-wrapper」として設定しています。入れ物に一緒に入れておくことで、背景もフォームコンテンツも同時に出したり消したりすることができます。