【发布时间】：2015-12-16 21:33:43
【问题描述】：
我使用 jQuery 对话框加载另一个网页。关闭对话框后出现问题。对话框关闭后，标题栏仍在屏幕上。我希望它完全消失。对话框在 div 上加载并成功打开。有人会告诉我如何解决这个问题。提前致谢。
对话框关闭后的屏幕截图。
有我的父页面代码：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test1.aspx.vb" Inherits="Test.Test1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="include/dialog.js" type="text/javascript"></script>
<link rel="stylesheet" href="/include/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css" />
<script language="javascript" src="/include/jquery-2.1.4.min.js" type="text/javascript"></script>
<script language="javascript" src="/include/jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"></script>
<script language="javascript" src="/include/dailog1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#btnOrder').click(function (e) {
e.preventDefault();
openBox('Test2.aspx?orderid=0', 'Testing', 700, 650);
});
});
</script>
<title>Parent page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnOrder" runat="server" Text="Order" />
<div id="dialog-box"/>
</div>
</form>
</body>
</html>
有子页面代码：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test2.aspx.vb" Inherits="Test.Test2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" language="javascript" src="Include/scripts.js"></script>
<script language="javascript" src="/include/dailog1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="Include/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="/include/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css" />
<script language="javascript" src="/include/jquery-2.1.4.min.js" type="text/javascript"></script>
<script language="javascript" src="/include/jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"></script>
<base target="_self" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#btnCancel').click(function (e) {
e.preventDefault();
CloseDialogBox();
});
});
</script>
<title>Dialog Box</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="* Required" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
<asp:Button ID="Button2" runat="server" Text="Save" />
</div>
</form>
</body>
</html>
有我的代码打开对话框：
function openDailogBox(url, name, width, height) {
$('#dialog-box').load(url).dialog({
autoOpen: false,
resizable: true,
height: height
width: width,
title: name,
modal: true,
draggable: false
});
$('#dialog-box').dialog('open');
return false;
}
关闭按钮位于对话框内的网页上：
$(document).ready(function () {
$('#btnCancel').click(function (e) {
e.preventDefault();
CloseDialogBox();
});
});
这是关闭对话框的代码。 （如果我不包含附加对话框的代码，我会收到 JavaScript 运行时错误：在初始化之前无法调用对话框上的方法；试图调用方法“关闭”）
function CloseDialogBox() {
$('#dialog-box').dialog({
autoOpen: false,
resizable: true,
title: name,
modal: true,
});
$('#dialog-box').dialog('close');
}
【问题讨论】：