网页加载时的jQuery Fancybox，iFrame中的内容

Question

I would like to load a fancybox when the document is ready, but in a specific DIV and the content of the fancybox will be from a different page, displayed as an iFrame. This is what I currently have:

$(document).ready(function () {     
     $.fancybox({
          'href'            : "#div",
          'content'         : "content.jsp",
          'type'            : "iframe",
     });
});

HTML:

<div id="div">
</div>

Nothing is loading in.

Answer 1

Try this:

$(document).ready(function () {     
     $("#div").fancybox({
          'href'            : 'content.jsp',
          'type'            : 'iframe'
     });
});

HTML

<div id="div">
    Click Here
</div>

JsFiddle

Answer 2

You cannot display the contents of a div as iframe but inline .

So you either open (programmatically) the content.jsp file directly in fancybox as iframe like :

jQuery(document).ready(function ($) {
    $.fancybox({
        href: "content.jsp",
        type: "iframe"
    });
}); // ready

Or load the contents of the content.jsp file into the div#div container and then show that inline content in fancybox like :

jQuery(document).ready(function ($) {
    $("#div").load("content.jsp", function () {        
            $.fancybox($(this), {
                // API options
                type: "inline"
            });
    });
}); // ready