title: how to close iframe popup in html
body: <p>this is my parent page, from where i'm opening a popup</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt;Popup example&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          function OpenPop() {
              window.scrollTo(0, 0);
              var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
              var height = document.documentElement.clientHeight + document.documentElement.scrollTop;
              var layer = document.createElement("div");
              layer.style.zIndex = 2;
              layer.id = "layer";
              layer.style.position = "absolute";
              layer.style.top = "0px";
              layer.style.left = "0px";
              layer.style.height = document.documentElement.scrollHeight + "px";
              layer.style.width = width + "px";
              layer.style.backgroundColor = "black";
              layer.style.opacity = "0.75";
              layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=75)");
              document.body.style.position = "static";
              document.body.appendChild(layer);
              var size = { "height": 220, "width": 400 };
              var iframe = document.createElement("iframe");
              var popUrl = 'popup.htm';
              iframe.name = "Logic Form";
              iframe.id = "popup";
              iframe.src = popUrl;
              iframe.style.height = size.height + "px";
              iframe.style.width = size.width + "px";
              iframe.style.position = "fixed";
              iframe.style.zIndex = 3;
              iframe.style.backgroundColor = "white";
              iframe.frameborder = "0";
              iframe.style.top = ((height + document.documentElement.scrollTop) / 2) - (size.height / 2) + "px";
              iframe.style.left = (width / 2) - (size.width / 2) + "px";
              document.body.appendChild(iframe);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;a onclick="OpenPop();" href="#"&gt;OpenPopup&lt;/a&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and this is my popup.html page,</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          function closeIframe() {
              var iframe = opener.document.getElementById("popup");
              var layer = opener.document.getElementById("layer");
              iframe.parentNode.removeChild(iframe);
              layer.parentNode.removeChild(layer);
          }
      &lt;/script&gt;
  &lt;/head&gt;
      &lt;body&gt;
          &lt;h3&gt;This is Popup&lt;/h3&gt;
          &lt;a onclick="closeIframe();" href="#"&gt;Close&lt;/a&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>problem : on popup.html , there is close button, who is calling function to remove iframe, but i am not able to close popup, anybody help?</p>
  
  <p><strong>OR</strong>  anybody have better solution or example to do popup like this?</p>
  
  <p>any help highly appreciated </p>