【業務効率化】モーダルをサクッと実装しよう!

javascript

【業務効率化】モーダルをサクッと実装しよう!

2022年09月20日 14:03　2022年09月22日

【業務効率化】モーダルをサクッと実装しよう!

こんにちわ！社員Tです。

今回は、コーディング初学者や新社員エンジニアの方に向けた、実務でモーダルを効率的に実装する方法をご紹介したいと思います！

サイト訪問者に強調して見せたい写真や商品画像等をモーダルを使って表現する際、最近ではJSプラグインを使って実装する事が多いと思うのですが、読み込みエラー等の解決に時間を使ってしまうことってありませんか？

自身も同じような経験が何度かあり、あえてプラグインは使わずに簡単なjQueryを『型』として覚えることで効率的に作業を進めるようにしました。

多少jQueryの知識は必要ですが、素のJSのコードは書かなくてOKなので、コーディング初学者の方でも覚えてしまえば、簡単にモーダルが実装ができます。

早速使ってみましょう！

jQueryの読み込み
HTMLの記述
CSSの調整
jQueryの記述
おわりに

jQueryの読み込み

作業をしているHTMLファイル内のbodyタグを閉じる直前に、以下のコードを読み込みます。

これで、jQueryが使える状態に。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTMLの記述

続いて、モーダルを出すトリガーとモーダルの中身をコーディングしていきます。

わかりやすくするため、必要最低限の記述にしています。

<!-- トリガー -->
<button id="openModal">Open modal</button>

<!-- モーダルの中身 -->
<section id="modalArea" class="modalArea">
  <div id="modalBg" class="modalBg"></div>
  <div class="modalWrapper">
    <div class="modalContents">
      <h1>Here are modal contents!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div id="closeModal" class="closeModal">
      ×
    </div>
  </div>
</section>
<!-- モーダルの中身 -->

button要素（トリガー）を押すと、モーダルの中身が展開します。

CSSの調整

さらにCSSでスタイルをあてていきます。

CSSは、案件により色々な仕様があると思いますが、下記のCSSを所々変更するくらいである程度は対応できる気がします。

適宜調整して試してみてください！

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */
button {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #282828;
  border-radius: 2px;
  cursor: pointer;
}

#openModal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

jQueryの記述

そして、jQueryの記述です。

jQueryは【なにを】【どうしたら】【どうなってほしい】という意図をコーディングで再現しやすいので本当に助かりますよね。

$(function () {
  $('#openModal').click(function(){
      $('#modalArea').fadeIn();
  });
  $('#closeModal , #modalBg').click(function(){
    $('#modalArea').fadeOut();
  });
});

JSプラグインでモーダルを実装する時に比べ、jQueryの記述量は増えますが記述する内容が単純なので、覚えてしまえばプラグインの読み込みエラー等で時間を割くよりよっぽど効率的だと個人的に思います。

では、成果物を確認していきましょう。

See the Pen
Untitled by tsurukei (@keisuke9360-0122)
on CodePen.

シンプルではありますが、案件の業態を問わず実装できるモーダルなので、ぜひこの機会に試して頂けたらと思います！