Question

我们正在尝试在我们的网站上添加两个fancybox内联弹出窗口。我们有一个工作，但我们无法让第二个工作。你能看一下我们的代码吗？

对于html，我们写了以下内容：

<a id="popup-inline" href="#data"><div class="button">Click here</div></a><br><br>
        <div style="display:none">
            <div id="data">
                TEXT
            </div>
        </div>

<a id="popup-inline" href="#data1"><div class="button">Click here</div></a><br><br>
        <div style="display:none">
            <div id="data1">
                TEXT1
            </div>
        </div>'

此外，我们的jquery是：

$(document).ready(function() {
$("#popup-inline").fancybox({
      'titlePosition' : 'inside' });
    });
</script>

Answer 1

ID是唯一的，因此将其更改为两个元素的类：

<a class="popup-inline" ...

并且做：

$(".popup-inline").fancybox({
     'titlePosition' : 'inside'
});

jQuery（和一般的javascript）只能在使用相同的ID两次时找到第一个元素，因为其他任何东西都是无效的标记，而且不是预期的。

Answer 2

@adeneo说的是对的。此外，您不应该在包含内联fancybox内容的元素周围放置隐藏的div：

<div id="data1" style="display:none">

    TEXT1

</div>

页面上有两个fancybox内联弹出窗口

2 个答案: