Need help closing a Pop Up Window via a text link

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:35 PM

Re: Need help closing a Pop Up Window via a text link

theskarnes@hotm ail.com (Steve) writes:
[color=blue]
> 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.[/color]

So "works well" means that it works if no popup blocker prevents to
window from openening, and if Javascript is enabeled.
[color=blue]
> What I would like to create is a link that can be clicked on to
> close the window that contains the larger image.[/color]

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?
[color=blue]
> This would make it easier for the users to close the window.[/color]

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.
[color=blue]
> <script language="JavaS cript">[/color]

The type attribute is required in HTML 4, and the language attribute
is not necessary when type is used:
<script type="text/javascript">
[color=blue]
> <!--[/color]

HTML-like comments are not necessary in Javascript.
[color=blue]
> function doNothing(){}[/color]

??
[color=blue]
> function popUp1(winFile, winHeight, winWidth) {
> window.open(win File, '', 'width=' + winHeight + ',height=' + winWidth
> +',')[/color]
....[color=blue]
> <p><a href="JavaScrip t: void doNothing()"
> onClick="popUp1 ('images/P5210025.jpg',2 65,223)"><img
> src="images/images1/P5210025_small. jpg" width="125" height="93"></a>[/color]

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,2 23);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='+winHei ght+',height='+ winWidth+',resi zable=yes');
var d = w.document;
d.open();
d.writeln("<!DO CTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "+
"\"http://www.w3.org/TR/html4/strict.dtd\">") ;
d.writeln("<htm l><head><title> Image<\/title>");
d.writeln("<met a http-equiv=\"Content-Script-Type\" ",
"content=\" text/javascript\"><\/head>");
d.writeln("<bod y style='margin:0 px;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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Steve** · Jul 20 '05, 12:35 PM

Re: Need help closing a Pop Up Window via a text link

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 <lrn@hotpop.com > wrote in message news:<3cbxkhda. fsf@hotpop.com> ...[color=blue]
> theskarnes@hotm ail.com (Steve) writes:
>[color=green]
> > 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.[/color]
>
> So "works well" means that it works if no popup blocker prevents to
> window from openening, and if Javascript is enabeled.
>[color=green]
> > What I would like to create is a link that can be clicked on to
> > close the window that contains the larger image.[/color]
>
> 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?
>[color=green]
> > This would make it easier for the users to close the window.[/color]
>
> 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.
>[color=green]
> > <script language="JavaS cript">[/color]
>
> The type attribute is required in HTML 4, and the language attribute
> is not necessary when type is used:
> <script type="text/javascript">
>[color=green]
> > <!--[/color]
>
> HTML-like comments are not necessary in Javascript.
>[color=green]
> > function doNothing(){}[/color]
>
> ??
>[color=green]
> > function popUp1(winFile, winHeight, winWidth) {
> > window.open(win File, '', 'width=' + winHeight + ',height=' + winWidth
> > +',')[/color]
> ...[color=green]
> > <p><a href="JavaScrip t: void doNothing()"
> > onClick="popUp1 ('images/P5210025.jpg',2 65,223)"><img
> > src="images/images1/P5210025_small. jpg" width="125" height="93"></a>[/color]
>
> 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,2 23);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='+winHei ght+',height='+ winWidth+',resi zable=yes');
> var d = w.document;
> d.open();
> d.writeln("<!DO CTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "+
> "\"http://www.w3.org/TR/html4/strict.dtd\">") ;
> d.writeln("<htm l><head><title> Image<\/title>");
> d.writeln("<met a http-equiv=\"Content-Script-Type\" ",
> "content=\" text/javascript\"><\/head>");
> d.writeln("<bod y style='margin:0 px;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[/color]

**Lasse Reichstein Nielsen** · Jul 20 '05, 12:35 PM

Re: Need help closing a Pop Up Window via a text link

theskarnes@hotm ail.com (Steve) writes:

(Please don't top post! At least trim the quotes!)
[color=blue]
> The "Close" link would go next to the thumbnail image and not in the
> pop up window.[/color]

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="openwi ndow = popUp1(this.hre f,'','width='.. ..);return false;">
<img src="thumbnailU RL.png"></a>

<input type="button" value="Close popup"
onclick="if(ope nwindow && !openwindow.clo sed) {
openwindow=open window.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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

Need help closing a Pop Up Window via a text link

Need help closing a Pop Up Window via a text link

Comment

Comment

Comment