【JS】同じページで複数箇所ポップアップ表示をするときに別々に動かしたい

Question

ボタンをクリックしたらポップアップが表示されるという部分を実装しています。

同じページ内に複数箇所ボタンがあり、それぞれ別々でポップアップを動作させてたいのですが、いかんせんJS初心者のためどうやって分けるのが一番いいのかわかりません。

現在のソースは下記です。ボタン１ならボタン１のポップアップ、ボタン２ならボタン２のポップアップを表示させたいです。

<!-- レイヤー -->
<div id="show">ボタン1</div>
<div id="layer"></div>
<!-- ポップアップ -->
<div id="popup">
    <div>popup</div>
    <input type="button" id="close" value="close popup">
</div>

<div id="show">ボタン2</div>

<div id="show">ボタン3</div>

$(function() {
     
    // show popupボタンクリック時の処理
    $('#show').click(function(e) {
        $('#popup, #layer').show();
    });
     
    // レイヤー/ポップアップのcloseボタンクリック時の処理
    $('#close, #layer').click(function(e) {
        $('#popup, #layer').hide();
    });
     
});

#layer {
    display: none; 
    position: absolute; 
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.20;
}
#popup {
    display: none;  
    position: absolute; 
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: white;
    border-radius: 5px;
    text-align: center;
}

Answer 1

既に回答にありますようにポップアップの定義によると思います。
簡単に書いてみたので、参考にならないかもしれませんが、何かのお役に立てば。。

<!-- レイヤー -->
<div id="show" class="show">ボタン1</div>
<div id="layer"></div>
<!-- ポップアップ -->
<div id="popup">
  <div>popup</div>
  <input type="button" id="close" value="close popup">
</div>

<div id="show" class="show">ボタン2</div>

<div id="show" class="show">ボタン3</div>

// show popupボタンクリック時の処理
$('.show').click(function(e) {
  var btn = $(e.target).text();
  $('#popup, #layer').show();

  // 追記してみました。
  // ボタン1〜3のどれが押されたのかをhtmlに書き出します。    
  if ($('#popup').find('span').length) {
    $('#popup').find('span').remove();
  }
  $('#popup').append(`<span>${btn}</span>`);
});

// レイヤー/ポップアップのcloseボタンクリック時の処理
$('#close, #layer').click(function(e) {
  $('#popup, #layer').hide();
});

Answer 2

ポップアップの定義次第ですね
= モーダルのように排他的に表示するのか？

• バックグラウンドの表示を調整するのか？（opacityなど）
• バックグラウンドのスクロールを抑制するのか?
• ポップアップの位置関係をどうする？（センタリングしたいとか・・）

などいろいろ課題はありますが、とりあえずボタンをおしたら
popup用のdivが表示されるだけなら、classやdata-targetなど
設定してやるといいでしょう。idは排他的な設定が必要なので
つけ始めるとキリがありませんので注意。
popup自体もクラスを指定して相対位置でつかんでやればもっと
汎用性はあがるかもしれませんが今回はとりあえずidで指定しておきます

.popup{display:none}
.button{border:outset 3px #000000;width:100px;text-align:center;}

$(function(){
  $('.button').on({
    'mousedown':function(){
      $(this).css('border-style','inset');
    },'mouseup':function(){
      $(this).css('border-style','outset');
    },'click':function(){
      $($(this).data('target')).css('display','block');
    }
  });
  $('.popup .close').on('click',function(){
    $(this).closest('.popup').css('display','none');
  });
});

<div class="button" data-target="#popup1">ボタン1</div>
<div id="layer"></div>
<div id="popup1" class="popup">
    <div>popup</div>
    <input type="button" class="close" value="close popup">
</div>
<div class="button" data-target="#popup2">ボタン2</div>
<div id="popup2" class="popup">
    <div>popup</div>
    <input type="button" class="close" value="close popup">
</div>
<div class="button" data-target="#popup3">ボタン3</div>
<div id="popup3" class="popup">
    <div>popup</div>
    <input type="button" class="close" value="close popup">
</div>

Comments

[_ayumi]

回答ありがとうございます。
このコードで動きを確かめてみました！

確かに別々で動いています。こうやればいいんですね。

ちなみに、ポップアップを前面の中央に出して、背景は黒の半透明、closeと背景どっちをクリックしても閉じるようにしたいです。
あと、できればclassで統一したいです。

上記のような場合は、どこを変更すればいいでしょうか。。？

[yambejp]

ご指摘の内容だとモーダルでよいと思いますので、何か適当な
ライブラリを利用するとよいでしょう