【超簡単！】CSSとjQueryで背景固定のモーダルウィンドウを自作

今回は、初心者でも超簡単にできてしまう、CSSとjQueryで背景固定のモーダルウィンドウを自作する方法を解説していきます。

背景が固定され、モーダルウィンドウ内では、要素が多くなると縦にスクロールできるような仕様にしています！

早速、実際の動作を確認して、コードを見ていきましょう！

×0.5倍にして見て下さい！

コードの解説を入れていきます。

HTML：モーダルのボタンと中身を作る

HTMLでモーダルを開くボタンと閉じるボタン、閉じる背景などを作っていきます。

jQueryを使うのに、HTMLで id を使わないのは、閉じるところを複数作るため class にしています。

また、モーダル内の閉じるバツボタンはフォントオーサムを使っているので、headタグで読み込んでいない人は下記のソースをhead内に貼り付けておきましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

引用元：cdnjs on GitHub

HTMLのソースは下記のようになります。

<div class="modal-btn js-modal-open">開く</div>
  <div class="js-modal">
    <div class="modal-bg js-modal-close"></div>
    <div class="modal-wrap">
      <span class="js-modal-close modal-close-btn"><i class="fas fa-times-circle"></i></span>
      <div class="modal-contents">
        <img src="img-1.jpg" alt="">
        <p class="sample-text">ここにモーダルの中身が入ります。</p>
        <p class="sample-text">ここにモーダルの中身が入ります。</p>
        <p class="sample-text">ここにモーダルの中身が入ります。</p>
        <p class="sample-text">ここにモーダルの中身が入ります。</p>
        <p class="sample-text">ここにモーダルの中身が入ります。</p>
        <div class="modal-btn js-modal-close">閉じる</div>
      </div>
    </div>
  </div>

CSS：ボタンの装飾と黒い背景を作る

CSSの装飾自体は、そこまで難しくありません。

モーダルを初期状態では、非表示にしておきます。

* {
  margin: 0;
  padding: 0;
}

.modal-btn {
  cursor: pointer;
  text-align: center;
  width: 300px;
  margin: 70px auto;
  padding: 20px 70px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  transition: 0.4s ease-in-out;
}

.modal-btn:hover {
  background: #fff;
  color: #000;
}

.modal-close-btn i {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 40px;
  cursor: pointer;
}

.js-modal {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}
.modal-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.modal-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  padding: 30px;
  overflow-y: scroll;
  transform: translate(-50%, -50%);
  background: #fff;
}

jQuery：CDNを読み込まないとjQueryは使えない

フォントオーサムと同様に、jQueryを読み込んでから出ないと、jQueryは動きませんので、読み込んでいない人は、下記のソースをhead内かbodyの直前に貼り付けておきましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

引用元：Google Hosted Libraries

jQueryを読み込むタグの後に今からjQueryを記述していきます。

HTML内にjQueryを記述する人は、scriptタグ内に記述。

別にjsファイルを作る方は、scriptタグでHTMLにjsファイルを読み込んでおきましょう。

僕の場合は、commons.jsというファイルを作成したので、jQueryを読み込むタグの下に、下記のソースを入れます。

  <script src="commons.js"></script>

commons.jsの中に書くソースは下のようになります。

$(function () {
  $(".js-modal-open").click(function () {
    $("html,body").css("overflow", "hidden");
    $(".js-modal").fadeIn();
    return false;
  });
  $(".js-modal-close").click(function () {
    $("html,body").removeAttr("style");
    $(".js-modal").fadeOut();
    return false;
  });
});

いたってシンプルな構成で、ボタンクリックしたらモーダルがフェイドイン・フェイドアウトさせます。

背景を固定させるには、jQueryでoverflow : hidden;を指定してあげれば、完成です。

まとめ：モーダルは誰でも簡単にできる

いかがでしたか？

今回のソースコードは比較的簡単に実装することができ、jsやjQuery初心者でも取り組みやすいので、挑戦してみて下さいね！