Question

我对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>

但是两个弹出窗口都是一样的。我想与第二个模态盒不同，宽度为1000px，高度等等。我怎样才能做到这一点＆gt;

谢谢！

Answer 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

Answer 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
});

两个iframe fancybox在同一页面上

2 个答案: