Question

在父页面上有按钮单击以打开加载另一个网页的jQuery UI对话框。在子页面上有＆＃34;关闭＆＃34;按钮关闭对话框。我可以在对话框上加载子页面，但是有一些问题。我搜索了许多网站（尝试使用销毁和删除对话框，开启或实时点击按钮）并没有找到解决方案。希望有人能帮助我解决它。提前致谢。

有我的问题：

打开对话框后，父页面上的打开按钮消失
点击＆＃34;关闭＆＃34;对话框上的按钮，对话框关闭但div显示，即使我将显示更改为无。

有父母：

单击子页面上的关闭按钮。

有我的父页面代码：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb"    Inherits="COMM.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
   <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/dailog.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#btnOpen2').click(function (e) {          
            e.preventDefault();
            openDailog();
        });
    });

  </script>
</head>
<body>
    <form id="form1" runat="server">
       <div><h1>Test</h1>
       <div id="somediv" />
          <button id="btnOpen2"> Open 2</button> 
     </div>
    </form>
  </body>
 </html>

子页面：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestClose.aspx.vb" Inherits="COMM.TestClose" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
 <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/dailog.js" type="text/javascript"></script>

  <script type="text/javascript" language="javascript">
  $(document).ready(function () {
      $('#btnClose').click(function (e) {
            e.preventDefault();
          closeDailog();       
      });

  });
    </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
        <button id="btnClose"> close</button> 
   </div>
  </form>
 </body>
</html>

有我的js代码：

function openDailog() {

$("#somediv").load('TestClose.aspx').dialog({
    autoOpen: false,
    modal: true,
    dialogClass: 'dialog',
    resizable: false,
    width: 500,
    height: 400,
    title: 'Close diaglog'
  });
  $("#somediv").dialog("open");
  return false;
}

function closeDailog() {

$('#somediv').dialog({
    autoOpen: false,
    modal: true,
    dialogClass: 'dialog',
    resizable: false,
    width: 500,
    height: 400

});

   $("#somediv").dialog("close");  
   $(".ui-dialog-titlebar").hide();
   $("#somediv").css("display", "none");


}

Answer 1

由于“打开2”按钮位于div中，因此在加载完成后会将其删除。

W3 Schools Load example在加载新内容时删除div中的内容时会执行相同的操作。

关于第二点，加载子页面没有变化，为什么删除它时会有一个？

您可能遇到一个挑战，即让子页重新加载父页，尽管您可以使用HTML5中的localStorage项来传递标记以触发父级中的重新加载。我怀疑你可以清空HTML的“somediv”div作为清除页面的方法。

对话框没有完全关闭，为什么不呢？

1 个答案: