Question

我使用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运行时错误：在初始化之前无法在对话框上调用方法;尝试调用方法＆＃39;关闭＆＃39;）

function CloseDialogBox() {   

    $('#dialog-box').dialog({
    autoOpen: false,
    resizable: true,     
    title: name,
    modal: true,
});

$('#dialog-box').dialog('close');   

}

Answer 1

我发现如果我在Test2.aspx上评论下面的jQuery文件，那么它就可以了。

 <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>

Answer 2

您可以在尝试使用之前测试对话框小部件是否已附加到元素。

function CloseDialogBox() {
    if ($"#dialog-box").is(":ui-dialog")) {
        $("#dialog-box").dialog("close");
    }
}

jQuery对话框关闭后，标题栏仍在屏幕上

2 个答案: