title: The title bar is still on screen after the jQuery dialogbox closed
body: <p>I used jQuery dialog box to load another webpage. I have a problem after closing the dialog box. After the dialog box is closed, the title bar is still on the screen. I want it to be completely gone. The dialog box is load on div and opened successfully. Would someone tell me how to solve this issue. Thanks in advance.</p>
  
  <p>Screenshot after the dialog box is closed. </p>
  
  <p><a href="https://i.stack.imgur.com/YTD4I.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YTD4I.gif" alt="After close, the title bar still on screen"></a></p>
  
  <p>There is my parent page code:</p>
  
  <pre><code> &lt;%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test1.aspx.vb"      Inherits="Test.Test1" %&gt;
  
   &lt;!DOCTYPE html&gt;
  
     &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
     &lt;head runat="server"&gt;
    &lt;script src="include/dialog.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/include/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css" /&gt;
    &lt;script  language="javascript" src="/include/jquery-2.1.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script language="javascript" src="/include/jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script language="javascript" src="/include/dailog1.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
    &lt;script type="text/javascript" language="javascript"&gt;
      $(document).ready(function () {
          $('#btnOrder').click(function (e) {
               e.preventDefault();
               openBox('Test2.aspx?orderid=0', 'Testing', 700, 650);
  
          });
      });
  
  &lt;/script&gt;
  &lt;title&gt;Parent page&lt;/title&gt;
   &lt;/head&gt;
  &lt;body&gt;
     &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;asp:Button ID="btnOrder" runat="server" Text="Order" /&gt;
       &lt;div id="dialog-box"/&gt;
     &lt;/div&gt;
    &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There is child page code:</p>
  
  <pre><code>&lt;%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test2.aspx.vb" Inherits="Test.Test2" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head runat="server"&gt;
      &lt;script type="text/javascript" language="javascript" src="Include/scripts.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" src="/include/dailog1.js" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" language="javascript" src="Include/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="/include/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css" /&gt;
        &lt;script language="javascript" src="/include/jquery-2.1.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script language="javascript" src="/include/jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  
     &lt;base target="_self" /&gt;
     &lt;script language="javascript" type="text/javascript"&gt;
   $(document).ready(function () {
          $('#btnCancel').click(function (e) {
              e.preventDefault();
              CloseDialogBox();
  
          });
   });
       &lt;/script&gt;
    &lt;title&gt;Dialog Box&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
        &lt;div&gt;
           &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
           &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="* Required" ControlToValidate="TextBox1"&gt;&lt;/asp:RequiredFieldValidator&gt;
          &lt;asp:Button ID="btnCancel" runat="server" Text="Cancel" /&gt;
          &lt;asp:Button ID="Button2" runat="server" Text="Save" /&gt;
       &lt;/div&gt;
     &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There is my code to open the dialog box:</p>
  
  <pre><code>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;
   }
  </code></pre>
  
  <p>The Close button is on the webpage which is inside the dialog box:</p>
  
  <pre><code>  $(document).ready(function () {
          $('#btnCancel').click(function (e) {
              e.preventDefault();
              CloseDialogBox();
  
          });
      });
  </code></pre>
  
  <p>Here is the code to close the dialog box. (If I don't include the code to attach the dialog, I get a JavaScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close')</p>
  
  <pre><code>function CloseDialogBox() {   
  
      $('#dialog-box').dialog({
      autoOpen: false,
      resizable: true,     
      title: name,
      modal: true,
  });
  
  $('#dialog-box').dialog('close');   
  
  }
  </code></pre>