By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,081 Members | 2,118 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,081 IT Pros & Developers. It's quick & easy.

Need help closing a Pop Up Window via a text link

P: n/a
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">
<!--
function doNothing(){}

function popUp1(winFile, winHeight, winWidth) {
window.open(winFile, '', 'width=' + winHeight + ',height=' + winWidth
+',')

}
// end -->
</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>
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
th********@hotmail.com (Steve) writes:
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:
<script type="text/javascript">
<!--
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

P: n/a
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 <lr*@hotpop.com> wrote in message news:<3c**********@hotpop.com>...
th********@hotmail.com (Steve) writes:
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:
<script type="text/javascript">
<!--


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

Jul 20 '05 #3

P: n/a
th********@hotmail.com (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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.