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

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>