带有按钮的多个弹出窗口

MLS 发表于 Dev

最小二乘

我想制作多个弹出窗口，这些弹出窗口在每个按钮单击时分别显示。

这是我到目前为止所做的

Java脚本

<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>

普伦贡

使用jQuery将事件处理程序分配给按钮时，无需循环。给它上课，并让按钮弄清楚它在哪里
给按钮一个data属性，告诉它要打开的内容

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

.popup_wrap {
  display: none
}

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。