javascript 如何实现多个弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5333271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement multiple popups?
提问by aleish76
I have a problem to implement multiple popups. I get this script from net, it's correct when I apply to a single popup but not if i do copies of this. You can see it in: Dendrosite. In the margin left menu (Sinopsi/Fitxa/Autors) i implemented correcly in one (Sinopsi) but now I can implement to other (Fitxa/Autors)
我在实现多个弹出窗口时遇到问题。我从网上得到这个脚本，当我申请一个弹出窗口时它是正确的，但如果我复制它就不是。您可以在：Dendrosite 中看到它。在左边距菜单 (Sinopsi/Fitxa/Autors) 中，我在一个 (Sinopsi) 中正确实施，但现在我可以在其他 (Fitxa/Autors) 中实施
HTML:
HTML：
<li class="sinopsi"><a id="go"><span></span></a></li>
<div id="popupContact">
<a id="popupContactClose"></a>
<h1></h1>
<h3>
<br/><br/>
</h3>
</div>
<div id="backgroundPopup"></div>
Javascript:
Javascript：
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("fast");
$("#popupContact").fadeIn("fast");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("fast");
$("#popupContact").fadeOut("fast");
popupStatus = 0;
}
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#go").click(function(){
//centering with css
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
and CSS:
和 CSS：
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
z-index:1;
}
#popupContact{
margin-top: -104px;
margin-left:102px;
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:288px;
width:600px;
z-index:9;
padding:12px;
background-color: #333;
filter: alpha(opacity=20); opacity: .5
}
#popupContact h1{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFF;
text-shadow: 0px 1px 1px #000;
padding-bottom:10px;
margin-bottom:30px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
#popupContact h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-align: justify;
}
#popupContactClose{
font-size:18px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color: #ffeb70;
font-weight:700;
display:block;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
Thanks!
谢谢！
采纳答案by Quang Van
The reason it didn't work was that for every #go #go1 #go2popup links, you need three separate event handlers, not just one. That's why multiple boxes pop-ups when you click on one, and none pop-ups when you click on the other two.
它不起作用的原因是对于每个#go #go1 #go2弹出链接，您需要三个单独的事件处理程序，而不仅仅是一个。这就是为什么当您单击一个时会弹出多个框，而当您单击其他两个时不会弹出多个框。
To get this to work I would rewrite the popup script to support multiple popups. But you can simply do this procedurally without using functions.
为了让它工作，我将重写弹出脚本以支持多个弹出窗口。但是您可以在不使用函数的情况下简单地按程序执行此操作。
HTML (Merge the code below with yours. The IDs, Class names relate to the javascript)
HTML（将下面的代码与您的代码合并。ID、类名与 javascript 相关）
<li id='sinopsi' class='openlink'>Sinopsi
<div class='popup' id='popup1'>Popup 1<span class='closex'>x</span></div>
</li>
<li id='fitxa' class='openlink'>Fitxa
<div class='popup' id='popup2'>Popup 2<span class='closex'>x</span></div>
</li>
<li id='autors' class='openlink'>Autors
<div class='popup' id='popup3'>Popup 2<span class='closex'>x</span></div>
</li>
JavaScript
JavaScript
<script>
$(function(){
$('#sinopsi').click(function(){ // Activates the popups
$('#popup1').fadeIn('fast')
});
$('#fitxa').click(function(){
$('#popup2').fadeIn('fast')
});
$('#sinopsi').click(function(){
$('#popup3').fadeIn('fast')
});
/* //Note that if your HTML is properly nested you could easily have this command execute your popups instead of the three above
$('.openlink').click(function(){
$(this)
.find('.popup') // finds your nested popup div
.fadeIn('fast')
;
});
*/
$('.closex').click(function(){ // closes the popup, when X is clicked
$('.popup').fadeOut('fast');
});
$('.popup').keypress(function(e){ // close popup via ESC key.
if(e.keyCode==27){
$(this).fadeOut('fast');
}
});
$('.popup').css({opacity: "0.7"}); // copies over the transparency
});
</script>
CSS (make sure the popups loaded hidden.)
CSS（确保弹出窗口加载隐藏。）
.popup{display:none}
Good luck mate, the site looks good btw. You should really learn more about jQuery, it's pretty powerful and really easy to use compared to just JavaScript. I'd think you'll enjoy it.
祝你好运，顺便说一句，该网站看起来不错。您应该真正了解有关 jQuery 的更多信息，与仅使用 JavaScript 相比，它非常强大且易于使用。我想你会喜欢的。
http://jquery.com/http://api.jquery.com/click/
http://jquery.com/ http://api.jquery.com/click/
p.s. Don't get to worried about all those anonymous functions function(){//do stuff}, it's just a shorthand of function bar(){//do stuff} $('.open').click(bar)
ps 不要担心所有这些匿名函数function(){//do stuff}，它只是一个简写function bar(){//do stuff} $('.open').click(bar)
