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

         

javascript

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

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

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

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

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

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

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

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

早速使ってみましょう!



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.

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

おわりに

いかがでしたでしょうか?

実務での作業効率化はどの制作会社様も重要な課題となっています。自身もより日々の実務作業が円滑に進むよう模索中です!

次回は、今回のモーダルをベースとしたカスマイズ方法もご紹介させて頂きます。

関連記事

この記事を書いた人

社員T

昨年、コーダーとして入社した社員Tです。 実務をこなしがら、さらなる技術向上のため勉強しています。