Javascript pop-up window code help

Old Plympto · Post by **Old Plympto** » 2007-05-06 12:01am

I need some help on writing some code for my own website.

I've been checking out some websites that have a thumbnail that when you click on it, it calls for a pop up window of the full image of the thumbnail. However, I'm also looking for the code that causes the pop-up window to automatically close when you click on the screen away from the window, like this guy's site here: http://www.bodark.com/archive/2007-04-3 ... den_season

I tried reading the source code but I can't for the life of me identify which part of the code causes the pop-up window automatic close.

This is what I got so far on my local machine:

Between <head></head>:

Code: Select all

<script language="JavaScript">

<!--

function window.open(theURL,winName,features);

//-->

</script>

And on the thumbnail linking to the full sized pop-up in the <body></body>:

Code: Select all

		<a name="image_name" onClick ="window.open 
		('image_name.jpg','Const','width=xxx,height=xxx'); return false">

		<img class="art" 
		src="thumb/image_name_thumb.jpg" target="_self" 
		title="some title">

		</a>

I don't have any javascript training nor do I have any reference books with me. I don't even know what 'Const' does; I got the code by reading the source off several sites.

If anyone knows how the pop-up can auto close when the mouse is left-clicked when the pointer is off the pop-up window I appreciate the help.

Thanks in advance.

Dooey Jo · Post by **Dooey Jo** » 2007-05-06 07:59am

You could try something like this, perhaps:

Code: Select all

  <script type="text/javascript">
    var win=0;
    function openWin(theUrl,features) {
      win = window.open(theUrl,'Blarg',features);
      if (window.addEventListener)
        window.addEventListener("blur", closeWin, false);
      else if (window.attachEvent)
        window.attachEvent("blur",closeWin);
    }
    function closeWin() {
      if (win == 0) return;
      win.close();
      win = 0;
    }
  </script>

And for the image:

Code: Select all

<a name="image_name" href ="javascript:openWin
      ('image_name.jpg','width=xxx,height=xxx');">

      <img class="art"
      src="thumb/image_name_thumb.jpg" target="_self"
      title="some title">

      </a>

Post by **Dalton** » 2007-05-06 08:45am

You're looking in the wrong place. Check the source code of the popup window:

Code: Select all

<script language="javaScript">
document.onkeypress = function esc(e) {
	if(typeof(e) == "undefined") { e=event; }
	if (e.keyCode == 27) { self.close(); }
}
</script>

Old Plympto · Post by **Old Plympto** » 2007-05-06 10:56am

Dooey: It didn't work, the window popped up and closed immediately thereafter.

Dalton: Gah! I didn't even think of looking there. I thought the pop-up was just an image file. Didn't even occur to me that it was a web document. Okay, now I have to dig deeper and find the code to create that kind of a pop up.

Thanks guys for pushing me in the right direction.

Dooey Jo · Post by **Dooey Jo** » 2007-05-06 12:25pm

Dalton wrote:You're looking in the wrong place. Check the source code of the popup window:
Code: Select all
<script language="javaScript">
document.onkeypress = function esc(e) {
	if(typeof(e) == "undefined") { e=event; }
	if (e.keyCode == 27) { self.close(); }
}
</script>

That is actually not the code which closes the window when it loses focus. This is though:

<body bgcolor="#000000" leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onblur="self.close();" onload="self.focus();">

Old Plympto wrote:Dooey: It didn't work, the window popped up and closed immediately thereafter.

I see... Try this then:

Code: Select all

    var win=0;
    function closeWin() {
      win.close();
    }
    function openWin(theUrl,features) {
      win = window.open(theUrl,'Blarg',features);
      window.onblur = closeWin;
    }

It's a little less elegant to write an inline event listener like they have on that page, but you can try that also. You'll need code to write to the opened window, but that page is probably doing that through PHP. It's easy to do in Javascript though. Write something like this:

Code: Select all

  <script type="text/javascript">
    function openWin(theUrl,features) {
      var win = window.open("",'Blarg',features);
      var text = "<html><head><title></title></head>\n";
      text += "<body onload="self.focus()" onblur="self.close()">\n";
      text += "<img src="" + theUrl + ""/>\n";
      text += "</body></html>";
      win.document.write(text);
      win.document.close();
    }
  </script>