jQuery ポップアップ

by interlife

HTML

<!-- ▼トリガーとなる表示要素 -->
<a data-popupName="js_popup1" class="js_popupOpen">クリックすると開きます</a>

<!-- ▼POPUP本体の要素 -->
<div class="js_popup1 popup ">
  <div class="popupPlate">
    <div class="text_area">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p>テキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
    <a class="popupClose">閉じます</a>
  </div>
  <div class="popupBgi"></div>
</div>

SCSS

.popup { 
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; 
  background: rgba(0,0,0,.6);
  
  //初期状態（非表示）
  opacity:0; z-index: -2; transition: opacity 0s;
  
  //クリックされたら（表示状態）
  &.open { 
    opacity: 1;  
    z-index: 90; 
    transition: opacity 0.2s; 
  }
  
  //背景
  .popupBgi { 
    position: absolute; top: 0; left: 0; z-index: 50; 
    width: 100%; height: 100%;
  }
  
  //POPUPの中身（レイアウトは自由に調整してください）
  .popupPlate {
    margin: 0 auto;
    padding: 4.6875% 6.25%;  
    position: absolute; top: 50%; left: 50%; 
    z-index: 60;
    transform: translate(-50%,-50%); //上下左右中央揃えのテクニック
    width: 90%; max-width: 1000px;
    background: #fff; text-align: center;
    
    //閉じるボタン
    .popupClose { 
      padding: .5em 1em;
      border: solid 1px #fff;
      display: inline-block; 
      position: absolute; bottom: 0; left: 50%;
      transform: translate( -50%,150%);
      background: rgba(#000,.5);
      color: #fff; // 文字色を追加
      text-align: center; 
      cursor: pointer; // カーソルを追加
    }
  }
}




//装飾
.js_popupOpen{
  margin: 1em 0;
  padding: 1em 2em;
  display: inline-block;
  background: #5f36b1;
  color: #fff;
  border-radius: 5px;
}
.text_area{
  margin: auto;
  padding: 1em;
  background: #e5dff0;
  max-width: 800px;
}

JavaScript

$(function() {
  $('.js_popupOpen').on('click',function(){
    // 1. クリックされた要素の「data-popupName」属性を取得
    var dname = $(this).attr('data-popupName');
    
    // 2. 取得した名前（dname）を持つクラスに「.open」クラスを追加して表示
    $('.'+dname).addClass('open');
    
    // 3. 「背景」または「閉じるボタン」がクリックされたら
    $('.popupBgi, .popupClose').click(function(){
      // ポップアップから「.open」クラスを削除して非表示に
      $('.popup').removeClass('open');
    });
  });
});