Need help closing a Pop Up Window via a text link

Steve · Dec 6, 2003

Hi, I have a nice little script that works well displaying images on
my website. It's a script where if you clik a thumbnail image a pop
up window opens that contains a larger version of the same image. What
I would like to create is a link that can be clicked on to close the
window that contains the larger image. This would make it easier for
the users to close the window. I have posted the script that I use.
Any help would be much appreciated. I tried to find the answer in the
archives and came close but in any programing language close usually
isnt good enough...Thanks.

"Head script"

<script language="JavaScript">

</script>

Image Link in body:

<p><a href="JavaScript: void doNothing()"
onClick="popUp1('images/P5210025.jpg',265,223)"><img
src="images/images1/P5210025_small.jpg" width="125" height="93"></a>

Lasse Reichstein Nielsen · Dec 6, 2003

Hi, I have a nice little script that works well displaying images on
my website. It's a script where if you clik a thumbnail image a pop
up window opens that contains a larger version of the same image.

So "works well" means that it works if no popup blocker prevents to
window from openening, and if Javascript is enabeled.

What I would like to create is a link that can be clicked on to
close the window that contains the larger image.

Make it a button. Buttons are clicked for an effect. Links are clicked
to get to a new resource.

Where do you want the button placed, on the old page or the new?

This would make it easier for the users to close the window.

Depends on users. For me, using mouse gestures is faster than any
button.

Anyway, making it faster to close makes it sound like you want
the button on the popup page.

<script language="JavaScript">

The type attribute is required in HTML 4, and the language attribute
is not necessary when type is used:

<!--

HTML-like comments are not necessary in Javascript.

function doNothing(){}
??

function popUp1(winFile, winHeight, winWidth) {
window.open(winFile, '', 'width=' + winHeight + ',height=' + winWidth
+',') ....
<p><a href="JavaScript: void doNothing()"
onClick="popUp1('images/P5210025.jpg',265,223)"><img
src="images/images1/P5210025_small.jpg" width="125" height="93"></a>

A good example of FAQ 4.24 <URL:http://jibbering.com/faq/#FAQ4_24>.
Your page is unusable in browsers without Javascript, and it doesn't
need to be.

Make the link:
<a href="images/P5210025.jpg"
onclick=popUp1(this.href,265,223);return false;"><img
src="images/images1/P5210025_small.jpg" width="125" height="93"></a>

This works with and without Javascript. With Javascript, you control the
opening of the window. Without, the user still sees the big image.

Now, to add a close button to the popup window, you need to control
the contents of the window. As it is now, you just open the image.
To make a close button, you need to open an html page. Try this:

---
function popUp1(winFile, winHeight, winWidth) {
var w = window.open('', '',
'width='+winHeight+',height='+winWidth+',resizable=yes');
var d = w.document;
d.open();
d.writeln("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "+
"\"http://www.w3.org/TR/html4/strict.dtd\">");
d.writeln("<html><head><title>Image<\/title>");
d.writeln("<meta http-equiv=\"Content-Script-Type\" ",
"content=\"text/javascript\"><\/head>");
d.writeln("<body style='margin:0px;padding:0px;'>")
d.writeln("<div><img src='"+winFile+"' onclick='window.close()'><\/div>");
d.writeln("<\/body><\/html>");
d.close();
}
---
This opens a popup, just as before. Then it writes HTML into it,
making an img element. It sets the onclick on the image element to
close the window, so you can click anywhere in the window to close it
(faster than any button).

Good luck
/L

Steve · Dec 6, 2003

Thanks Lasse for your reply and the warning about the code not working
in all browsers. The "Close" link would go next to the thumbnail image
and not in the pop up window. This way the user would only have to
click the thumbnail to view/open the pictures and then close this
window quickly by clicking the link instead of having to move the
mouse over the "X". Thank you for you for your help!

p.s. sorry about not clarifying this the first time.

Lasse Reichstein Nielsen · Dec 7, 2003

(e-mail address removed) (Steve) writes:

(Please don't top post! At least trim the quotes!)

The "Close" link would go next to the thumbnail image and not in the
pop up window.

Much easier then. The only problem is that you can't click it if the
popup obscures it, so you have to move the popup to get to the button.

Try:

<a href="imageURL.png"
onclick="openwindow = popUp1(this.href,'','width='....);return false;">
<img src="thumbnailURL.png"></a>

<input type="button" value="Close popup"
onclick="if(openwindow && !openwindow.closed) {
openwindow=openwindow.close();}">

Inside popUp1, return the return value of the call to window.open.
That is the only reference you have to the new window, and you need
the reference in order to close the window.

/L

Closing an overlay outside the overlay as well	1	Dec 11, 2022
WIN32 - Update Text in a Window in order to show its size in Pixels and coordinates	0	Oct 4, 2023
I need help making a zooming function	11	Dec 14, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with my responsive home page	2	Dec 14, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help with code	0	Jun 12, 2022
beginner: how to close a pop up window before opening an other pop up	8	Sep 15, 2005

Need help closing a Pop Up Window via a text link

Steve

Lasse Reichstein Nielsen

Steve

Lasse Reichstein Nielsen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads