关闭模式后，页面变得无法响应

Question

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

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

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

 $("#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

关于如何创建模态的代码段：

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

编辑：

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

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

然而，在第一次关闭模态后，它将不会第二次打开并且我收到此错误。 - ＆GT;更新：使用remove不会在调用时返回模态。我现在完全糊涂了该怎么做。我需要在使用.remove（）调用时删除那些DOM元素，但是我需要在调用时将它们带回来。

Uncaught TypeError: Cannot call method '_focusTabbable' of undefined 

Answer 1

不要像那样使用。尝试

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

Answer 2

关闭功能似乎不是问题。

单击链接时，将显示模式。在这一刻，您在DOM中创建一个模态。参见：

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

问题在于你的函数触发了这个模态。在DOM中有许多HTML，“关闭”功能会慢得多。