Fancybox inside fancybox( or nested 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

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