fancybox(或嵌套fancybox)中的Fancybox

Question

我有三个html页面，index.html、first.html和second.html。在索引页中，我有一个按钮B1。当我点击那个按钮时，会打开一个花哨的盒子，里面有first.html的内容。在fancybox内部，使用了另一个按钮B2。单击B2时，第二个fancybox将打开。第二个花哨盒在第一个fancybox的内部，第二个的内容是second.html。问题是第二个fancybox的大小限制在第一个fancybox的内部。怎样才能比第一扇盒的宽度和高度增加？下面是代码。

$(".fancybox").click(function () {
        var url = $(this).attr('url');
        $.fancybox.open({
            href: url,
            type: 'iframe',
            padding: 1,
            autoDimensions: true,
            autoScale: false,
        });
    });

我试着设置宽度和高度，但没有工作。

Answer 1

根据文档，如果将"autoDimensions“设置为true，则忽略宽度和高度参数。

您试过将“页边距”设置为0吗？它将删除框和视图之间的空间。

看看这个例子：http://codepen.io/thiagofelix/pen/MYjNKE

$(document).ready(function () {
  $.fancybox({
    href: 'http://i.imgur.com/u0FXwTf.jpg',
    link: 'http://www.google.com.br',
    margin: 0,
    padding: 0,
    showCloseButton: false
  });
});

Answer 2

您可以在打开第二个fancybox的按钮中添加：

onclick="parent.window.document.getElementById('fancybox-wrap').style.width = '1000px';parent.window.document.getElementById('fancybox-wrap').style.height= '1000px'"

Answer 3

您可以使用函数onComplete，然后更新模式的高度。

    $(".fancybox").click(function () {
            var url = $(this).attr('url');
            $.fancybox.open({
                href: url,
                type: 'iframe',
                padding: 1,
                autoDimensions: true,
                autoScale: false,
                onComplete: function(){
                    $('#fancybox-frame').bind('load',function(obj){
                            $('#fancybox-content').height(this.contentWindow.document.body.scrollHeight) // detect height of our frame and set it to modal
                            $.fancybox.resize();//auto resize
                    });
                }
            });
        });

这是一个演示