同一页面上的两个 iframe fancybox答案

【问题标题】：Two iframe fancybox on same page同一页面上的两个 iframe fancybox
【发布时间】：2012-09-18 01:44:35
【问题描述】：

fancybox 脚本有一个问题。我正在使用fancybox 2.1（最新）。例如，我希望两个 iframe 链接在同一页面上工作，但每个模式框具有不同的设置和自定义。例如

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">second </a></li>

我用

覆盖默认自定义

<script type="text/javascript">
jQuery.extend(jQuery.fancybox.defaults, {
            href : 'iframe.html',
            type : 'iframe',
        padding : 0,
        margin  : 20,

        width     : 800,
        height    : 0,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,

        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,

});
</script>

但是两个弹出窗口是相同的。我想与众不同，比如第二个模态框的宽度为 1000 像素，高度更高等。我怎样才能做到这一点>

谢谢！

【问题讨论】：

标签： jquery iframe fancybox fancybox-2

【解决方案1】：

您可以为每个链接使用 HTML5 data-* 属性并为每个 iframe 传递不同的大小，例如将 html 设置为：

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="1000" data-height="600">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="700" data-height="450">second </a></li>

然后在您的脚本中，获取data-width 和data-height 的值并使用beforeShow 回调传递大小

<script type="text/javascript">
$(document).ready(function(){
 $(".fancybox").fancybox({
        padding : 0,
        margin  : 20,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,
        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,
        beforeShow : function(){
          this.width = $(this.element).data("width");
          this.height= $(this.element).data("height");
        }

 }); // fancybox
}); // ready
</script>

注意，我没有指定 API 选项 type: "iframe"，因为链接已经有 class fancybox.iframe

【讨论】：

如果你使用$(this)，它需要在一个回调函数中，这样每个匹配的元素都会不同。您应该使用.each() 循环。
@Barmar：我没有使用$(this)，是吗？ ...并且此解决方案（不是$(this)）使用单个脚本处理多个链接可以正常工作；）
@Barmar : 更多检查stackoverflow.com/a/10776520/1055987 或stackoverflow.com/a/9529889/1055987（没有.each() 循环）
我看错了你写的东西，我没有看到它在 beforeShow 回调中。

【解决方案2】：

使用大多数 jQuery 插件执行此操作的常规方法是在调用它时指定选项，并为元素指定不同的 ID。

HTML：

<li><a class="fancybox fancybox.iframe" id="box1" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" id="box2" href="give-me-meal.html">second </a></li>

JS：

$("#box1").fancybox();
$("#box2").fancybox({
    height: 1000
});

【讨论】：

如果你有 100 个链接怎么办？你打算设置100个fancybox脚本吗？ ...谢谢，但不谢谢；）
@JFK 在这种情况下，您的答案会更好。尽管输入 100 个data-width 属性并没有那么容易。有这么多，我希望它们是统一的，而不是单独的大小。