带按钮的多个弹出窗口
[英]Multiple popups with buttons
问题描述
我想制作多个弹出窗口，每个按钮单击时单独显示。
这是我到目前为止所做的
<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>
1 个解决方案
解决方案1
0 已采纳 2016-09-20 08:50:15
- 使用jQuery将事件处理程序分配给按钮时，不需要循环。 给它一个类，让按钮弄清楚它在哪里
- 给按钮一个数据属性，告诉它打开什么
$(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>
多个按钮分别控制弹出窗口
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.