Question

我想制作多个弹出窗口，每个按钮点击时单独显示。

这是我到目前为止所做的事情

Javascript

<body>
<button id="popup_btn" class="popup_btn" type="button"> Hi </button>			
			    			
<div id="popup" class="popup_wrap">
  <div class="popup_content">
    <p> Hi</p>
    <button id="popup_close" class="close"> close </button>
  </div>
</div> 

<button id="popup_btn" class="popup_btn" type="button"> History </button>			
			    			
<div id="popup" class="popup_wrap">
  <div class="popup_content">
    <p> Hi</p>
    <button id="popup_close" class="close"> close </button>
  </div>
</div> 

<button id="popup_btn" class="popup_btn" type="button"> Skill </button>			
			    			
<div id="popup" class="popup_wrap">
  <div class="popup_content">
    <p> Hi</p>
    <button id="popup_close" class="close"> close </button>
  </div>
</div>
</body>

Answer 1

使用jQuery将事件处理程序分配给按钮时，不需要循环。给它一个类，让按钮弄清楚它在哪里
给按钮一个数据属性，告诉它打开什么

＆＃13;

$(function() {
  $(".popup_btn").on("click",function() {
    $("#"+$(this).data("div")).toggle();
  });
  $(".popup_close").on("click",function() {
    $(this).closest("div.popup_wrap").hide();
  });
  
});

＆＃13;

.popup_wrap {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>
  <button data-div="popup1" id="popup_btn1" class="popup_btn" type="button">Hi</button>

  <div id="popup1" class="popup_wrap">
    <div class="popup_content">
      <p>Hi</p>
      <button class="popup_close" class="close">close</button>
    </div>
  </div>

  <button data-div="popup2" id="popup_btn2" class="popup_btn" type="button">History</button>

  <div id="popup2" class="popup_wrap">
    <div class="popup_content">
      <p>Hi</p>
      <button class="popup_close" class="close">close</button>
    </div>
  </div>

  <button data-div="popup3" id="popup_btn3" class="popup_btn" type="button">Skill</button>

  <div id="popup3" class="popup_wrap">
    <div class="popup_content">
      <p>Hi</p>
      <button class="popup_close" class="close">close</button>
    </div>
  </div>
</body>

＆＃13;

带按钮的多个弹出窗口

1 个答案: