花式盒内花式盒（或嵌套花式盒）答案

【问题标题】：Fancybox inside fancybox( or nested fancybox)花式盒内花式盒（或嵌套花式盒）
【发布时间】：2014-11-11 10:35:51
【问题描述】：

我有三个 html 页面，index.html、first.html 和 second.html。在索引页面中，我有一个按钮 B1。当我单击该按钮时，会打开一个包含 first.html 内容的精美框。在 fancybox 中，使用了另一个按钮 B2。单击 B2 时，打开第二个幻想框。第二个花式框在第一个花式框内，第二个的内容是 second.html。问题是第二个花式框的大小限制在第一个花式框内。我怎样才能增加第二个花式框的宽度和高度比第一个花式框的宽度和高度？以下是代码。

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

我尝试设置宽度和高度但没有成功。

【问题讨论】：

Fancybox 使用 iframe，而 iframe 不能包含大于自身的内容。
@NatureShade Orly?

标签： javascript jquery html fancybox

【解决方案1】：

根据documentation，如果将“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
  });
});

【讨论】：

【解决方案2】：

您可以添加到打开第二个花式框的按钮：

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

【讨论】：

【解决方案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
                    });
                }
            });
        });

这是DEMO

【讨论】：