关闭模式后页面变得无响应答案

【问题标题】：Page becomes unresponsive after closing a modal关闭模式后页面变得无响应
【发布时间】：2014-04-12 05:07:50
【问题描述】：

我正在创建一个管理客人和登记入住的酒店管理系统。

我的模态响应时间有问题。

我在模态框内有一个取消按钮，它关闭了模态框但不会重新加载页面。这是我在取消按钮中得到的：

 $("#cancel").click(function(event) {
     event.preventDefault();
     jQuery(".ui-dialog").dialog().dialog('close');
     jQuery(".ui-widget-overlay").dialog().dialog('close');
 });

问题来了：当模态出现时（通过单击另一个按钮），我单击取消并执行上面的代码。我这样做了很多次（打开模式并取消）并且页面变得无响应。在执行 5 次以上之后，您必须等待几分钟才能关闭模式。你甚至不能关闭浏览器的标签页。

非常欢迎任何想法。谢谢。

PS。我把系统上传到网上给你看。 http://greenenergiesllc.com/temp

Login: joel

Password: 1234

创建我的一些模态的 PHP 文件：https://www.dropbox.com/s/azi51w0pzp69kgh/checkin.php

关于我如何创建模态的代码 sn-p：

jQuery( "#ex4").dialog({
    height: 'auto',
    width: 450,
    modal: true,
    closeOnEscape: false,
    open: function(event, ui) {
        jQuery(this).parent().children().children('.ui-dialog-titlebar-close').hide();
    }, position: ["center", 100],
    resizable: false
});

编辑：

这是我到目前为止所做的。我通过在close调用后添加.remove解决了DOM创建太多对象的问题。

 $("#cancel").click(function(event) {
     event.preventDefault();
     jQuery(".ui-dialog").dialog().dialog('close').remove();
     jQuery(".ui-widget-overlay").dialog().dialog('close').remove;
 });

但是，第一次关闭模态框后，第二次无法打开，我得到了这个错误。 --> 更新：使用 remove 不会在调用时恢复模态。我现在完全困惑该怎么办。我需要在使用 .remove() 调用时删除这些 DOM 元素，但我需要在调用时将它们带回来。

Uncaught TypeError: Cannot call method '_focusTabbable' of undefined

【问题讨论】：

标签： javascript jquery performance modal-dialog

【解决方案1】：

不需要那样使用。试试

$(".ui-dialog").dialog( "close" );
$("#cancel").click(function(event) {
 event.preventDefault();
 $(".ui-dialog").dialog( "close" );
 $(".ui-widget-overlay").dialog('close');
});

【讨论】：

嗨。谢谢你的时间。我试过你的代码。但是我打开模态时遇到错误：Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close' 我将系统上传到网络供您查看。 greenenergiesllc.com/temp 登录名：joel 密码：1234 谢谢

【解决方案2】：

关闭功能似乎没有问题。

当您单击链接时，会出现模式。此时，您在 DOM 中创建了一个模式。见：

如果您多次单击，您在 DOM 中创建了许多其他模式。见：

问题在于触发此模式的函数。如果您的 DOM 中有许多 HTML，“关闭”功能会更慢。

【讨论】：

感谢您的观察。这是创建签入和签出模式的文件。 dropbox.com/s/azi51w0pzp69kgh/checkin.php@Line 100，创建结帐模式。问题是，我做错了什么？
第一步：尝试将您的取消事件更改为：$("#cancel").click(function(){ $(".ui-dialog-content").dialog("close"); });。您尝试关闭模式的方式是在 DOM 中创建空模式。
嗨。感谢你的宝贵时间。我尝试了您的建议，但出现错误：Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'。这就是我使用.dialog().dialog('close'); 的原因，因为它有效:)