Popup box that won't close

[glowingnova]

I'm using a script that I found on this page
http://javascript.internet.com/navig...popup-box.html
to make an overlaying popup window appear.
It works great but you can't close it.

Can anyone help me with how to add a something to make the window close? I have a little graphic of an "x" that I want to be able to click on and close the overlay window.

PS I am a novice to JavaScript. I need very very clear instructions.

Thank you so much!!!

[Philip M]

Add this to your pop-up page:-

<img src = "yourXthing.gif" onclick = "window.close()">


Quizmaster: Which English king succeeded Henry VIII?
Contestant: Henry VII.

[itsallkizza]

Modified show_hide_box function (additions in red):

function show_hide_box(an, width, height, borderStyle) {
  var href = an.href;
  var boxdiv = document.getElementById(href);

  if (boxdiv != null) {
    if (boxdiv.style.display=='none') {
      move_box(an, boxdiv);
      boxdiv.style.display='block';
    } else
      boxdiv.style.display='none';
    return false;
  }

  boxdiv = document.createElement('div');
  boxdiv.setAttribute('id', href);
  boxdiv.style.display = 'block';
  boxdiv.style.position = 'absolute';
  boxdiv.style.width = width + 'px';
  boxdiv.style.height = height + 'px';
  boxdiv.style.border = borderStyle;
  boxdiv.style.backgroundColor = '#fff';

  var close_btn = document.createElement("div");
  close_btn.className = "box_close_btn";
  close_btn.pid = href;
  close_btn.onclick = function()
  	{
  	show_hide_box({href:this.pid});
  	}
  boxdiv.appendChild(close_btn);

  var contents = document.createElement('iframe');
  contents.scrolling = 'no';
  contents.frameBorder = '0';
  contents.style.width = width + 'px';
  contents.style.height = height + 'px';
  contents.src = href;

  boxdiv.appendChild(contents);
  document.body.appendChild(boxdiv);
  move_box(an, boxdiv);

  return false;
}

Use CSS to assign your close button image:

<style type="text/css">
.box_close_btn
{
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 20px;
background: #ff0000; /*Put image here.*/
}
</style>

[glowingnova]

Originally Posted by Philip M

Add this to your pop-up page:-

<img src = "yourXthing.gif" onclick = "window.close()">


Quizmaster: Which English king succeeded Henry VIII?
Contestant: Henry VII.

Thank you, but it only works if I open up the html page with the close button directly, not when it opens as an overlay box on my original page.

[glowingnova]

itsallkizza, Thank you so, so very much. This code change works perfectly. Much appreciated.