1

Jqueryで開くモーダルボックスがあります。閉じるボタンが呼び出されると、モーダル ボックスが閉じられます。すべて正常に動作しますが、モーダル ボックスを開いたり閉じたりするほど、モーダル ボックスを閉じるのに時間がかかります。

window.closeModal = function () {
    modal = $("div.modal-overlay");
    windowHeight = $(window).height();
    // Until here performance is good
    modal.animate({top: windowHeight, }, 800, function () {
        // This is the problem 
        modal.hide();
        $("body").css("overflow-y", "scroll");
    });
}

すべての行にコンソール ログを配置しました。modal.animate 関数を実行するまで、すべてが即座に実行されます。モーダルを開いて閉じるボタンを押すたびに、modal.animate の実行が開始されるまでに時間がかかります。

誰か光を当ててください。

@EDIT：問題を示すjsfiddleを作成しました。

モーダルを開いてからモーダルを閉じるだけです。これを4 ～ 5回実行して、遅延が大きくなるのを確認します

http://jsfiddle.net/CZ54C/

@@編集: 非常に奇妙なことが起こります。

openModal は 1 回実行されますが、iframe.load はモーダルの開閉で # 回実行されます ...

window.openModal = function (url) {
    console.log("open start");
    modal = $("div.modal-overlay");
    modalIframe = $("div.modal-overlay iframe");
    windowHeight = $(window).height();
    modal.css("bottom", "0");
    modalIframe.attr("src", url + "?frame=true");
    modalIframe.load(function () {
        console.log("open load")
        modalIframe.css('height', windowHeight);
        modal.show().animate({
            top: 0,
        }, 800, function () {
            $("body").css("overflow-y", "hidden");
        });
    });
}
4

2 に答える 2

0

問題は、モーダル ダイアログを開くたびに新しいloadハンドラを にアタッチしていることです。modalIframeしたがって、[モーダルを開く] を 2 回目にクリックすると、ロード コールバックが 2 回実行されます。次のクリックで、3 回実行されます。

これにアプローチする最善の方法は、load イベント ハンドラーをopenModal関数の外に移動して、クリック ハンドラーをアタッチする同じブロックに移動することです。

ワーキングデモ

$(function () {
    var modal = $("div.modal-overlay"),
        modalIframe = modal.find('iframe');

    $("a.open").click(function (e) {
        e.preventDefault();
        var href = $(this).attr("href");
        openModal(href);
    });

    $("a.close").click(function (e) {
        e.preventDefault();
        closeModal();
    });

    //put load handler here
    modalIframe.load(function () {
        var windowHeight = $(window).height();

        modalIframe.css('height', windowHeight);
        modal.show().animate({
            top: 0,
        }, 800, function () {
            $("body").css("overflow-y", "hidden");
        });
    });
});

window.openModal = function (url) {
    $("div.modal-overlay iframe").attr("src", url + "?frame=true");
}

window.closeModal = function () {
    modal = $("div.modal-overlay");
    windowHeight = $(window).height();
    modal.animate({
        top: windowHeight,
    }, 800, function () {
        modal.hide();
        $("body").css("overflow-y", "scroll");
    });
}
于 2013-07-25T11:51:36.283 に答える
0

問題は解決したと思いますが、

iframe の URL を変更すると、「ロード ハンドラが再びアタッチされる」ようです。したがって、「ロードが実行される」たびに添付されます。次のコードを使用して解決しました。

 modalIframe.one('load',function () {});

//Instad of
 modalIframe.load(function () {});

これは良い習慣ですか？

于 2013-07-25T11:46:28.950 に答える