jQueryでテキストの切り替えが可能な共通ポップアップを作成する

2021年11月30日 12:02

背景

ポップアップを作るとき、サイト内にポップアップを表示する箇所はいくつかある場合が多くて、同じコードを毎回も書くのはめんどくさい。
加えて、同じページに何個もポップアップがある場合には、表示内容の切り替えもめんどくさい。
なので、共通化しつつテキストの切り替えが容易にできるポップアップを作る。

やりたいこと

MEZONメニューとサロンメニューというものがあり、各メニュー横の❓アイコンを押したらそれぞれの説明を記載したポップアップを表示したい。

実装方法

jQueryでポップアップを表示する度にテキストを書き換えられるようにする。

やってみる

View
【ポップアップ自体】

<div class="popup-bg"> 
</div>
<div class="popup-container">
 <div class="popup-content">
   <p class="protocol-1"></p> //ここに1つ目のテキストが入る
   <div class="protocol-2">
     <p></p> //ここに2つ目のテキストが入る
   </div>
 </div>
 <div class="protocol-btn-area">
   <%= link_to '閉じる', '#',class: 'popup-btn cancel-btn' %>
 </div>
</div>

protocol-1とprotocol-2のテキストを都度書き換えていく。

【ボタン設置部分】

<div class="popup-JoinEvent popup-mezon-menu"> 
    <%= image_tag 'hatena.png' %>
</div>
<div class="popup-JoinEvent popup-salon-menu">
    <%= image_tag 'hatena.png' %>
</div>

popup-JoinEventをポップアップ共通のクラスとしつつ、popup-mezon-menuやpopup-salon-menuなどそれぞれ固有のクラスもつけておく。

JavaScript

【ポップアップを表示したり閉じたりするコード】

jQuery(function() {

 //ポップアップと背景を表示する
 $('.popup-JoinEvent').on('click',function(){
   $('.popup-bg').fadeIn();
   $('.popup-container').fadeIn();
   return false;
 });
 //閉じるボタンを押したらポップアップを閉じる
 $('.popup-close-btn').on('click',function(){
   $('.popup-bg').fadeOut();
   $('.popup-container').fadeOut();
   return false;
 });
 
 //背景を押したらポップアップを閉じる
 $(".popup-bg").on('click', function(){
   $('.popup-bg').fadeOut();
   $('.popup-container').fadeOut();
 });
 
});

popup-JoinEventをクリックしたらポップアップが表示される。

【テキストを書き換えるコード】

//一つ目のポップアップ
$(function(){
 $('.popup-mezon-menu').on('click', function () {
   $('.protocol-1').text("MEZONメニューとは");
   var text =
     `MEZONメニューとは、お試しプラン・月額プランにご登録いただくことで、<br>
     いつでも、どこの美容室でもお得に受けられるヘアケアメニューです。<br>
     ［ご利用可能メニュー］<br>
     ・シャンプー・スタイリング<br>
     ・ヘッドスパ<br>
     ・トリートメント<br>
     ・リタッチ（根元染め）<br>
     ・フルカラートリートメント、他<br>
     ※ご登録プランによって、受けられるメニューに制限があります。`
   $('.protocol-2').html(text);
 });
});

//二つ目のポップアップ
$(function(){
 $('.popup-salon-menu').on('click', function () {
   $('.protocol-1').text("サロンメニューとは");
   $('.protocol-2').html("サロンメニューの説明");
  });
});

👆このコードで都度テキストを書き換える。
popup-JoinEventクラスがついた要素をクリックして、ポップアップが開くと同時に、固有でつけておいたクラス(popup-mezon-menuなど)の要素がクリックされたらテキストを書き換える処理を書く。

(ここも共通化できそう）

スタイルシート(要らなそうなところは消してます)

.popup-bg {
 display: none;
 background: #171819;
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 width: 100vw;
 z-index: 11;
}
.popup-container {
 display: none;
 width: 58.4rem;
 position: fixed;
 left: 50%;
 bottom:0;
 transform: translate(-50%, 0);
 z-index: 12;
 .popup-content {
   border-radius: 1.2rem;
   overflow: hidden;
   color:#414042;
   background: #ffffff;
 }
 .protocol-1 {
   font-weight: bold;
   font-size: 1.8rem;
   line-height: 2.4rem;
   background-color: #F5F5F5;
   padding: 2.4rem;
   text-align: center;
  }
  .protocol-2 {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin: 3.6rem 3.2rem;
  }
}
.protocol-btn-area {
   text-align: center;
   margin: 0 auto;
   margin-top: 2.7rem;
   .popup-btn {
   　font-size: 1.6rem;
   　text-decoration: none;
   　background-color: #636367;
   　color: #ffffff; 
   　padding: 1.1rem 2.215rem 1.1rem 2.185rem;
   　border-radius: 2.4rem;
 　}
}

以上です！