Question

我正在尝试创建一个包含多个链接的页面，每个链接都需要弹出自己的文本。

我从一些在线论坛获得了代码并对其进行了修改，以适应我的模板和弹出内容要求，并且它工作得很好！...仅针对第一个。当我尝试复制第二个链接的代码时，它会在单击任一链接时同时打开两个弹出窗口。我甚至将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：

<style>
.overlay_form{
    position: absolute;
    border: 5px solid gray;
    padding: 10px;
    background: white;
    width: 350px;
    height: auto;
}
.pop{
    display: text;
    width: 65px;
    text-align: center;
    padding: 0px;
    border-radius: 5px;
    text-decoration: none;
    margin: 0 auto;
}
</style>

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>

如果有人可以帮助我，我会很感激，因为我对jQuery很新。如果您需要任何其他信息，请与我们联系。

谢谢！

Answer 1

我清理了一下你的标记，你有很多额外的标签你可以进一步缩小 - 但这只会让它更容易导航。至于弹出窗口，它确实有效，但是因为你通过类名.overlay_form引用叠加层，并且因为有 2 对象具有该类名，所以它将显示最后一个它找到的一个（总是＃2）。

您要做的是找到您正在点击的.pop范围内的叠加层 relative 。在我的示例小提琴中，这是通过导航到parent()（<td>）然后在该父级中找到form .overlay_form项来完成的。

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

Here is a fiddle example.

这也可以防止您在要显示的弹出窗口中进行硬编码。

Answer 2

在您的打开和关闭功能中，您指定的是CSS类而不是ID。现在你用CSS类overlay_form说任何对象。您需要做的是替换

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

与

$("#pop1").fadeIn(1000);

然后我会建议将onclick事件添加到导致弹出EX：

的按钮

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

现在你的JavaScript函数将是：

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

这应该适合你，虽然它不是我的头脑而且我没有测试过。

将来我会建议调查jQuery Dialog，因为你可以让它完全按照你想要的方式工作，并设置为在屏幕中间弹出，包括关闭按钮和所有其他乐趣东西。

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

2 个答案: