同一页面上的两个 iframe fancybox

Posted 2023-05-09

【中文标题】同一页面上的两个 iframe fancybox

【英文标题】：Two iframe fancybox on same page

【发布时间】：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 像素，高度更高等。我怎样才能做到这一点>

谢谢！

【参考方案1】：

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

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data- data->first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data- data->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 : 更多检查***.com/a/10776520/1055987 或***.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 属性并没有那么容易。有这么多，我希望它们是统一的，而不是单独的大小。