如何实现多个弹出窗口？

Question

我在实现多个弹出窗口时遇到问题。我从网上得到这个脚本，当我应用到单个弹出窗口时它是正确的，但如果我复制它则不是。您可以在：Dendrosite 中看到它。在左侧边距菜单（Sinopsi/Fitxa/Autors）中，我在一个（Sinopsi）中正确实现，但现在我可以在其他（Fitxa/Autors）中实现

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：

变量弹出状态 = 0; //用jQuery魔法加载弹出窗口！ 函数加载弹出（）{ //仅在禁用时加载弹出窗口 如果（弹出状态==0）{ $("#backgroundPopup").css({ “不透明度”：“0.7” }); $("#backgroundPopup").fadeIn("fast"); $("#popupContact").fadeIn("fast"); 弹出状态 = 1; } } //使用 jQuery 魔法禁用弹出窗口！ 功能禁用弹出（）{ //仅在启用时才禁用弹出窗口 如果（弹出状态==1）{ $("#backgroundPopup").fadeOut("fast"); $("#popupContact").fadeOut("fast"); 弹出状态 = 0; } } //控制jQuery中的事件 $(文档).ready(函数(){ //加载弹窗 //点击按钮事件！ $("#go").click(函数(){ //用css居中 //加载弹窗 加载弹出（）； }); //关闭弹窗 //点击x事件！ $("#popupContactClose").click(function(){ disablePopup(); }); //点击退出事件！ $("#backgroundPopup").click(function(){ disablePopup(); }); //按 Escape 事件！ $(文档).keypress(函数(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); });

和 CSS：

#backgroundPopup{ 显示：无； 位置：固定； _位置：绝对； /* 破解 Internet Explorer 6*/ 高度：100%； 宽度：100%； 顶部：0； 左：0； z-索引：1； } #popupContact{ 边距顶部：-104px； 左边距：102px； 显示：无； 位置：固定； _位置：绝对； /* 破解 Internet Explorer 6*/ 高度：288px； 宽度：600 像素； z-索引：9； 填充：12px； 背景颜色：#333； 过滤器：阿尔法（不透明度= 20）；不透明度：0.5 } #popupContact h1{ 字体系列：Arial、Helvetica、sans-serif； 字体大小：20px； 颜色：#FFF； 文字阴影：0px 1px 1px #000; 填充底部：10px； 边距底部：30px； 边框底部宽度：1px； 边框底部样式：实心； } #popupContact h3{ 字体系列：Arial、Helvetica、sans-serif； 字体大小：12px； 颜色：#FFF； 文本对齐：对齐； } #popupContactClose{ 字体大小：18px； 行高：14px； 右：6px； 顶部：4px； 位置：绝对； 颜色：#ffeb70； 字体粗细：700； 显示：块； 光标：指针； 字体系列：Arial、Helvetica、sans-serif； }

谢谢！

Answer 1

它不起作用的原因是对于每个#go #go1 #go2 弹出链接，您需要三个单独的事件处理程序，而不仅仅是一个。这就是为什么单击一个时会弹出多个框，而单击其他两个时则不会弹出多个框。

为了让它工作，我会重写弹出脚本以支持多个弹出窗口。但是您可以简单地通过程序执行此操作，而无需使用函数。

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

<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（确保加载的弹出窗口隐藏。）

.popup{display:none}

祝你好运，顺便说一句，该网站看起来不错。你真的应该了解更多关于 jQuery 的知识，与 JavaScript 相比，它非常强大且非常易于使用。我想你会喜欢的。

http://jquery.com/ http://api.jquery.com/click/

附言不要担心那些匿名函数function(){//do stuff}，它只是function bar(){//do stuff} $('.open').click(bar)的简写