带按钮的多个弹出框

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

以下是我迄今所做

Javascript

<body> 
 
<button id="popup_btn" class="popup_btn" type="button"> Hi </button> \t \t \t 
 
\t \t \t  \t \t \t 
 
<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> \t \t \t 
 
\t \t \t  \t \t \t 
 
<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> \t \t \t 
 
\t \t \t  \t \t \t 
 
<div id="popup" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
    <p> Hi</p> 
 
    <button id="popup_close" class="close"> close </button> 
 
    </div> 
 
</div> 
 
</body>

来源

2016-09-20 MLS

欢迎SO。请张贴CODE代替PICTURES代码！访问[帮助]了解原因。另外你的问题是什么？如果您有多个弹出窗口执行相同操作，则需要使用CLASS而不是ID。 ID需要是唯一的 – mplungjan

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

来源

2016-09-20 08:50:15 mplungjan

哦...谢谢T^T，但弹出框没有关闭;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; T^T实际上，我发布了javascript和css，但出现错误，因此我可以添加屏幕截图;;; – MLS

我贴的代码在关闭时点击关闭div – mplungjan

哇！非常感谢你~~它工作！ > _ MLS

带按钮的多个弹出框

回答

相关问题