0

ユーザーがリンクを押すまでページの 1 つの要素が読み込まれない Web サイトを構築しています。リンクは非常に重く、ほとんどの場合必要とされないローカル フォームへのリンクです (これは、ユーザーがリンクを押さない限りフォームを読み込まないことを好む方法です)。

次に、フォームが div に読み込まれ、元のページ構成とスクリプトの多くが使用されます。

今、私はそのフォームをfancybox（オーバーレイ）として直接ロードしたいのですが、それはアウトサイダーDOM（iframeではないなど）ではないため、元のページの必要なすべてのスクリプト、機能、およびデザインに引き続きアクセスできます。

助言がありますか？

4

1 に答える 1

2

.load()既存の（非表示の）フォームにフォームを挿入し、divそれをコンテンツとしてファンシーボックスに表示するために使用できますinline....次のようなもの：

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削除できます。form

afterClose: function(){
    $('#formPlaceHolder').empty();
}
于 2013-06-11T18:35:14.807 に答える