Question

我想在一个页面上使用多个div弹出窗口。我使用其他人的jsfiddle使其适用于一个弹出窗口，但让它适用于多个弹出窗口是另外一个故事。

我已经通过多种方式为单个弹出窗口调整了jsfiddle，以实现多个弹出窗口，但我的javascript knowlegde仍然没那么好。

我想要的是以下内容：我在一个页面上有六个内容块，每个内容块都包含更多内容＆＃39;按钮将打开该内容块的弹出窗口，从而在弹出窗口中生成更多文本。因此，每个内容块都有自己的额外内容＆＃39;隐藏在div中。当我点击属于六个块之一的按钮时，额外的内容将在弹出窗口中打开。当我点击另一个块的按钮时，需要弹出特定的额外内容。

我已经用我的jsfiddle走了这么远：http://jsfiddle.net/WGPhG/1122/

特此我的代码（到目前为止）：

function openPopup('div1') {
   $('#div1').fadeIn(200);
   $('#div2').hide;
}
function openPopup('div2') {
   $('#div2').fadeIn(200);
   $('#div1').hide;
}

function closePopup() {
    $('.popup').fadeOut(300);
}

有人能帮助我吗？

非常感谢！

Answer 1

这不是调用javascript函数的正确方法。如果您的标记一直保持不变，那么您可以这样做：

<强>标记

<button onClick="openPopup(this);">open div1</button>  <!-- pass this as a current reference of element -->

<强>的jQuery

function openPopup(elem) {  // clicked button element will be referred here
   $(elem).next().fadeIn(200);
   $(elem).next().siblings(".popup").hide();
}

或不更改标记

function openPopup(ID) {
   $('.popup').hide();
   $("#" + ID).fadeIn(200);
}

Demo

Demo2

<强>文档

Answer 2

刚刚重写了您的函数声明并修复了一些语法错误，如果您对我的解决方案有任何疑问，请随时提出。

function openPopup(el) {
$('.popup').hide();
$('#' + el).fadeIn(200);   
}

function closePopup() {
$('.popup').fadeOut(300);
}

JSFiddle：http://jsfiddle.net/JKurcik/WGPhG/1124/

一页上有多个div弹出窗口

2 个答案:

Demo

Demo2