fancybox内的Fancybox（或嵌套的fancybox）

Question

I have three html pages, index.html, first.html and second.html. In index page I have a button B1. When I clicked on that button a fancy box is opened with contents of first.html. Inside fancybox , another button B2 is used. When B2 is clicked , second fancybox is open. 2nd fancy box is inside of first fancybox and the content of 2nd is second.html. The problem is size of 2nd fancybox is limiting inside of first fancybox. How can I increase the width and height of 2nd fancybox than that of 1st fancybox? Following is the code.

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

I tried to set width and height but not worked.

Answer 1

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

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

Answer 2

According to the documentation if you set "autoDimensions" to true, the width and height parameters are ignored.

Have you tried to set "margin" equal to 0? It will remove the space between the box and the viewport.

Take a look on this example: 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 3

You can use function onComplete then update height of your modal

    $(".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
                    });
                }
            });
        });

This is a DEMO