jQueryでシンプルなポップアップを実装する

jQueryを使用したシンプルなモーダルポップアップの実装方法についてコードの解説を含めて記します。
ボタンをクリックすると画面がグレーアウトして縦横中央にポップアップ画像が表示され、背景をクリックすると消えるというものを作っていきます。

たった3ステップです。

Contents

①表示領域と表示する中身をHTMLで書く
②CSSで表示領域の背景と中身の位置を調整する
③JQueryで表示と非表示のイベントフックをつくる
ソースコード全文

①表示領域と表示する中身をHTMLで書く

今回はボタンクリックでポップアップを出せるようにボタンも用意しておきます。

  <button class="show_pop">ポップアップ表示</button>

  <div class="modal_pop">
　　<div class="bg js-modal-close"></div>
    <div class="modal_pop_main">
      <img src="img/popUp.png">
    </div>
  </div>

ボタンと画像が表示されました。
画像は一旦少し小さめに表示しております。
ボタンは押してもまだ何も起きません。

②CSSで表示領域の背景と中身の位置を調整する

<style>
.modal_pop{
　　width: 100vw;
    height: 100vh;
    position:fixed;
    top: 0;
    left:0;
    z-index:9997!important;
}
.bg{
    background-color: #1119;
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:9998!important;
}
.modal_pop img{
    height:80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index:9999!important;
}
</style>

現段階で表示してしまうとすべてのコンテンツが隠れて戻せなくなってしまうので、ここは解説に留めます。

３～７行目で枠を作り、
１１行目で背景に色をかけ（#1119はいい感じのグレーの透過になる）、
１２～１４行目で背景の位置とサイズを調整し、
１８～２２行目で中身の表示位置とサイズを調整しています。

③JQueryで表示と非表示のイベントフックをつくる

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 　$('.modal_pop').hide();
 　$('.show_pop').on('click',function(){
   　$('.modal_pop').fadeIn();
 　})
 　$('.js-modal-close').on('click',function(){
   　$('.modal_pop').fadeOut();
 　})
</script>

下のボタンをクリックするとポップアップが表示されるはずです。
背景をクリックするとポップアップは消えます。

１行目でjQueryのCDNを読み込み、
３行目でロード時はポップアップを隠し、
４～６行目でボタンクリック時にポップアップを表示し
７～９行目で画面の背景をクリック時にポップアップを非表示にしています。

ソースコード全文

最後に全コードを載せておきます。

<button class="show_pop">ポップアップ表示</button>

<div class="modal_pop">
　<div class="bg js-modal-close"></div>
  <div class="modal_pop_main">
    <img src="img/popUp.png">
  </div>
</div>

<style>
.modal_pop{
    width: 100vw;
    height: 100vh;
    position:fixed;
    top: 0;
    left:0;
    z-index:9997!important;
}
.bg{
    background-color: #1119;
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:9998!important;
}
.modal_pop img{
    height:80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index:9999!important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 $('.modal_pop').hide();
 $('.show_pop').on('click',function(){
     $('.modal_pop').fadeIn();
 })
 $('.js-modal-close').on('click',function(){
     $('.modal_pop').fadeOut();
 })
</script>

以上、jQueryでシンプルなポップアップを実装する方法でした。