【jQuery】プラグインなしでモーダルウィンドウ（ポップアップ）をつくろう

ボタンクリックでモーダルウィンドウ（ポップアップ？）を作る方法を解説します。

実装イメージの確認
コード解説
コーディングでお困りなら、、、

実装イメージの確認

See the Pen モーダルイメージ by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

実装イメージはこんな感じです。閉じるボタンでもモーダルの外側をクリックしても閉じれるようにしてます。以下で簡単にコード解説します。

コード解説

HTML部分

<div class="area">
<a id="button1" class="button">ウィンドウを開く</a>

<!-- モーダルエリア -->
<div class="popup1 hidden">
    <div class="outside">
    </div>

    <div class="content">
        <img src="https://coding-shop.net/wp-content/uploads/2024/10/close.png" id="close1" class="close__button">
        <p>モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。</p>
    </div>
</div>
  
</div>  


<!-- jQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

ここｋはあまり特筆すべき部分はありません。#button1をクリックしたときに#popup1を表示する～ってのをこのあとに書いていくイメージです。idを変えていって量産することも可能です。

CSS部分

/* モーダルCSS */
.popup1{
  display: none;
  height: 100vh;
  width: 100%;
  background:rgba(0,0,0,0.25);
  opacity:1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;  
}

.content{
  line-height: 1.7;
  position: fixed;
  z-index: 99999;
  top: 50%;
  left: 50%;
  width:740px;
  box-sizing: border-box;
  margin:0;  
  max-width: 92%;
  max-height: 92vh;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  display:block;
  color: #333;
  padding:70px;
  background: white;  
}

.close__button{
  position:absolute;
  right:20px;
  top:20px;
  width:50px;
  height:50px;
  cursor:pointer;
}

.outside{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  cursor: pointer;  
}

.area{
  position:relative;
}

CSSの特筆すべき部分ですが、.popupで画面全体を表示・非表示の切り替えを行うのと薄い黒ベタを設置し、その中身を.contentで表示していくイメージです。

.outsideを全体に広げ、contentの後ろに配置することで.content外の黒ベタをクリックしたときも非表示になるようにしています。閉じるボタンだけだと不便なこともありますからね。

スタイルについては各々調整してください。

JS部分

$(function () {
  $('#button1').on('click',function(){
    $('.popup1').removeClass('hidden').fadeIn();
  });

  $('.outside').on('click',function(){
    $('.popup1').fadeOut();     
  });

  $('#close1').on('click',function(){
    $('.popup1').fadeOut();
  });
});

JSはこんな感じです。#button1クリックでモーダル表示、.outsideと#close1でpopup1を閉じる感じです。