How to load local href directly to fancybox without using iframe?

Question

I'm building website where one element of the page is not loaded until the user press a link. The link is to local form which is quite heavy and isn't needed most of the time (that's way I prefer not to load the form unless the user press the link).

The form is then loaded into a div and uses many of the original page configuration and scrips.

NOW, I want to make that form load directly as fancybox (overlay) BUT it most not be an outsider DOM (e.g not iframe) so it will still have access to all the necessary script, function and design of the original page.

any suggestions?

Answer 1

You could use .load() to insert the form in an existing (hidden) div and then display it in fancybox as inline content .... something like :

the html

<a class="fancybox" href="external_form.html">display form</a>

<div id="formPlaceHolder" style="display: none"></div>

the jQuery

jQuery(document).ready(function ($) {
    $(".fancybox").on("click", function (e) {
        e.preventDefault();
        $('#formPlaceHolder').load("" + this.href + "", function () {
            $.fancybox(this, {
                // fancybox API options here
            }); 
        }); // load
    }); // on click
}); // ready

Eventually, you could use the afterClose callback to remove the form from the DOM after it has been submitted like :

afterClose: function(){
    $('#formPlaceHolder').empty();
}