...

View Full Version : Popup box that won't close



glowingnova
01-20-2009, 03:44 PM
I'm using a script that I found on this page
http://javascript.internet.com/navigation/absolute-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
01-20-2009, 04:31 PM
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
01-20-2009, 04:39 PM
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
01-20-2009, 04:46 PM
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
01-20-2009, 04:47 PM
itsallkizza, Thank you so, so very much. This code change works perfectly. Much appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum