jquery - 如何在不使用 iframe 的情况下将本地 href 直接加载到 fancybox？

Question

我正在构建网站，在用户按下链接之前不会加载页面的一个元素。该链接指向本地表单，该表单非常繁重，并且大部分时间都不需要（这样我不喜欢加载表单，除非用户按下链接）。

然后将表单加载到 div 中并使用许多原始页面配置和脚本。

现在，我想让该表单直接加载为fancybox（覆盖）但它最不是外部DOM（例如不是iframe），因此它仍然可以访问原始页面的所有必要脚本、功能和设计。

有什么建议么？

Answer 1

您可以使用.load()将表单插入现有（隐藏）div中，然后将其作为inline内容显示在fancybox中......类似于：

html

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

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

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

最终，您可以在 DOM 提交后使用afterClose回调从 DOM 中删除，如下所示：form

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