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

jQuery


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

たった3ステップです。


①表示領域と表示する中身を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>


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

3~7行目で枠を作り、
11行目で背景に色をかけ(#1119はいい感じのグレーの透過になる)、
12~14行目で背景の位置とサイズを調整し、
18~22行目で中身の表示位置とサイズを調整しています。




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

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

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

1行目でjQueryのCDNを読み込み、
3行目でロード時はポップアップを隠し、
4~6行目でボタンクリック時にポップアップを表示し
7~9行目で画面の背景をクリック時にポップアップを非表示にしています。




以上jQueryでシンプルなポップアップを実装する方法でした。
最後に全コードを載せておきます。

<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://code.jquery.com/jquery-3.3.1.js"></script>
<script>
 $('.modal_pop').hide();
 $('.show_pop').on('click',function(){
     $('.modal_pop').fadeIn();
 })
 $('.js-modal-close').on('click',function(){
     $('.modal_pop').fadeOut();
 })
</script>

コメント

タイトルとURLをコピーしました