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

Question

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

对于 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 说的是正确的。此外，您不应在包含内联花式框内容的元素周围放置隐藏的 div：

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

    TEXT1

</div>