Javascript Fancybox有问题。Iframe仅适用于站点上的第一个链接

我正在测试Fancybox的iframe，我注意到在我的Wordpress博客上（我猜在其他地方），iframe只为我主页上的第一个链接打开。 不过，我已经在所有链接中添加了id属性

你知道为什么会这样，以及如何纠正吗？ 下面是代码。我只将名称更改为popup并设置为all links id=“popup”。在示例页面上，它也使用id，但仅在一个链接上使用

<script type="text/javascript">
    $(document).ready(function() {
        $("#popup").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#弹出窗口”）.fancybox({
“宽度”：“75%”，
“高度”：75%，
“自动缩放”：false，
“transitionIn”：“无”，
“transitionOut”：“无”，
“type”：“iframe”
});
});

id必须是唯一的。如果您现有的代码类似于

<a href="whatever" id="popup">Link 1</a>
<a href="whateverelse" id="popup">Link 2</a>

改为

<a href="whatever" class="popup">Link 1</a>
<a href="whateverelse" class="popup">Link 2</a>

然后，将Javascript调整为

<script type="text/javascript">
    $(document).ready(function() {
        $("a.popup").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

$（文档）.ready（函数（）{
$（“a.popup”）.fancybox({
“宽度”：“75%”，
“高度”：75%，
“自动缩放”：false，
“transitionIn”：“无”，
“transitionOut”：“无”，
“type”：“iframe”
});
});

---

使用他们文档中的代码对您不起作用的原因是，他们的文档只处理一个链接，而不是一组链接。

您在那里所做的是将一个fancybox添加到一个具有弹出id的实体中。如果您想要多个

第一个添加一些代码，第二个我认为应该是一个具有相同名称而不是ID的类！ID应该是唯一的，所以尝试将ID更改为类，然后更改该类的选择器box@Itroubs您好，我已经更新了问题，但我所做的完全是根据他们的文档。谢谢您，先生！成功了。有带过渡效果的列表吗？