1

I have a modal box I open with Jquery. When the close buttons is called, the modal box is closed. All works fine, but the more I open and close the modal box, the longer it takes for the modal box to close:

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");
    });
}

I have put console logs on every line, and everything is executed instantly until I hit the modal.animate function. Every time I open a modal, and press the close button, it takes more time until modal.animate starts executing.

Can anyone shed some light please.

@EDIT: I have created a jsfiddle that shows the problem.

Just press open modal, then close modal. Do this 4-5 times to see the delay become bigger

http://jsfiddle.net/CZ54C/

@@EDIT: Something very strange happens.

although openModal is executed once, the iframe.load is executed # times the modal is opened and closed ...

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因此，如果您第二次单击“打开模式”，则加载回调将执行两次。在下一次单击时，它将执行 3 次，依此类推。

解决此问题的最佳方法是将函数外部的加载事件处理程序移动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 回答