Jquery 单个页面上有多个不同的弹出窗口

我试图创建一个页面，其中有几个链接，每个链接需要弹出自己的文本

我从一些在线论坛获得了代码，并对其进行了修改，以满足我的模板和弹出式内容的要求，它工作得很好！。。。只为第一个半身像。当我尝试复制第二个链接的代码时，单击其中一个链接就会同时打开两个弹出窗口。我甚至将Javascript代码从ID标识符切换到了类标识符，但似乎没有任何效果

这是当前的代码

Javascript

 $(document).ready(function(){
//open popup
$(".pop").click(function(){
  $(".overlay_form").fadeIn(1000);
  positionPopup();
});

//close popup
$(".close").click(function(){
    $(".overlay_form").fadeOut(500);
});
});

//position the popup at the center of the page
function positionPopup(){
  if(!$(".overlay_form").is(':visible')){
    return;
  } 
  $(".overlay_form").css({
      left: ($(window).width() - $('.overlay_form').width()) / 2,
      top: ($(window).width() - $('.overlay_form').width()) / 7,
      position:'absolute'
  });
}

//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);

CSS:

.U表格{
位置：绝对位置；
边框：5px纯灰；
填充：10px；
背景：白色；
宽度：350px；
高度：自动；
}
爸爸{
显示：文本；
宽度：65px；
文本对齐：居中；
填充：0px；
边界半径：5px；
文字装饰：无；
保证金：0自动；
}

HTML代码段：

<td height="117" colspan="6" align="left"><span class="stylearial">

<a href="#"> 
<span class="pop" id="pop1"><strong>Link Text 1</strong></span></a></span><br>

<form> <span class="overlay_form" id="form1" style="display:none">
                <p class="stylearial" align="center"><span class="stylecalibritext"> Heading </span></p>

                <p><span class="stylearial">Text 1...</span></p>
                <a href="#" style="text-decoration: none"><span class="close" id="close1"><p class="stylearial" align="center"><span class="stylecalibritext">Done</span></p></span></a>    
              </span>
</form>

              </td>



.
.
.



<td height="117" colspan="6" align="left">
<span class="stylearial">
<a href="#"><span class="pop" id="pop2"><strong>Link Text 2</strong></span></a></span><br>


<form><span class="overlay_form" id="form2" style="display:none">
                <p class="stylearial" align="center"><span class="stylecalibritext">Heading 2 </span></p>

                <p><span class="stylearial">
            Text 2...
            </span></p>
                <a href="#" style="text-decoration: none"><span class="close" id="close2"><p class="stylearial" align="center"><span class="stylecalibritext">Done</span></p></span></a>    
              </span></form>

              </td>

标题

正文1

.
.
.


标题2


文本2。。。

如果有人能帮我解决这个问题，我将不胜感激，因为我对jQuery非常陌生。如果您需要任何其他信息，请告诉我

---

谢谢

在“打开”和“关闭”函数中，您指定的是CSS类而不是ID。现在您所说的是任何具有CSS类覆盖形式的对象。你需要做的是更换

$(".overlay_form").fadeIn(1000);

与

然后，我建议将onclick事件添加到导致弹出的按钮中：

<span class="pop" id="pop1" onclick="openPop('pop1');"><strong>Link Text 1</strong></span>

这应该对你有用，虽然这是我不知道的，我还没有测试过

---

将来我会建议你可以让它按照你想要的那样工作，它会在屏幕中间弹出，包括关闭按钮和其他有趣的东西。

< P>我清理了你的标记，你有很多额外的标签，你可能可以进一步压缩-但这只会使它更容易导航。至于弹出窗口，它确实起作用，但由于您是通过其类名

.overlay\u form

引用覆盖，并且由于有2个具有该类名的对象，因此它将显示它找到的最后一个对象（始终为#2）

您要做的是查找相对于您正在单击的

.pop

span的覆盖。在我的示例fiddle中，这是通过导航到

父项（）

（

）然后在该父项中找到

表单.overlay\u表单

项来完成的

$(".pop").click(function () {
    $(this).parent().find("form .overlay_form").fadeIn(1000);
    positionPopup();
});

---

这还可以避免您必须硬编码要显示的弹出窗口。

JS Fiddle正在按照我的要求工作。。。但是我在我的网站上复制了代码，同样的问题仍然存在。。。我注意到您使用了jQuery 2.0.2。。。我正在使用jQuery1.6.1.min.js。。。那会是个问题吗？那不应该是个问题。检查查看

$（this）.parent（）.find（“form.overlay\u form”）

返回的内容，以确保它指向正确的对象-如果不是，则您可能会将标记的布局与小提琴不同。还要检查控制台中是否有任何错误，然后从那里开始。

<span class="pop" id="pop1" onclick="openPop('pop1');"><strong>Link Text 1</strong></span>

function openPop(id){
    var controlId = '#' + id;
    $(controlId).fadeIn(1000);
    positionPopup();
}

$(".pop").click(function () {
    $(this).parent().find("form .overlay_form").fadeIn(1000);
    positionPopup();
});