title: Close a (dialog box) iFrame from a button within the iFrame
body: <p>I have two files, named <code>main_page.html</code> and <code>dialog_box.html</code> (see code below).
  I  want my <code>handleCloseDialogButton()</code> to "close the dialog box", in other words to reload <code>main_page.html</code>,  with <code>theFrame.style.display</code> reset to "none".
    How can I do this ? Should I use <code>window.open("main_page.html")</code> or <code>window.location.href="main_page.html"</code> or something else ?
   Note: I do not want to use Javascript’s <code>alert()</code> function because its capabilities are not sufficient for what I need.</p>
  
  <p>Contents of main_page.html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;head&gt;
  &lt;script&gt;
  function handleDialogButton()
  {
  var theFrame=document.getElementById("myDialogBox");
  theFrame.style.display="block";
  theFrame;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="myDiv"&gt; &lt;h2&gt; Hello world. This is the main page.&lt;/h2&gt;&lt;/div&gt;
  &lt;iframe  id="myDialogBox" src="./dialog_box.html" style="display:none"&gt; &lt;/iframe&gt;
  &lt;input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box" 
  onClick="javascript:handleDialogButton();" /&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Contents of dialog_box.html : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;head&gt;
  &lt;script&gt;
  function handleCloseDialogButton()
  {
  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="myDiv"&gt; &lt;h2&gt; Hello world. I am the dialog box.&lt;/h2&gt;&lt;/div&gt;
  &lt;input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box" 
  onClick="javascript:handleCloseDialogButton();" /&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>