Ryan Martinsen

Home About Archives Projects

JavaScript popup code modified

I hate popup windows with about 3 passions (red, magenta, and anti-utopia 2), but they do have their place. So I guess I only hate the ones that don’t fit into that very fine specification. :) They are very useful for bringing up, for example, larger images when you click on a thumbnail, or bringing up a small help window, or other similar uses.

About a week ago I needed a popup window that used a default size and position for the window unless otherwise specified. So I modified an exisiting JavaScript script to do just that. I added/modified a whopping 100 characters to the script, but hey, I googled on this and didn’t find one like it so I thought I’d post it. So here it is in all it’s glory.

It doesn’t matter where you place this, but it’s usually a good idea to place it in your <head> tag:

<script language="javascript" type="text/javascript">
<!&#45;&#45; Original: Eric King (http://redrival.com/eak/) &#45;&#45;>
<!&#45;&#45; Modifications: Ryan Martinsen (https://www.ryanware.com/) &#45;&#45;>
function popupWindow(url, name, w, h, x, y) {
  if (!w) w = 450;
  if (!h) h = 280;
  if (!x) x = 150;
  if (!y) y = 150;

  winprops = 'toolbar=no,location=no,' +
     'directories=no,status=no,menubar=no,scrollbars=yes,' +
     'resizable=yes,copyhistory=no,width=' + w + ',height=' + h + ',' +
     'screenX=' + x + ',screenY=' + y + ',top=' + x + ',left=' + y;
   win = window.open(url, name, winprops);
  if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>

Then add the green part to your links like this, changing 'name' to a name for your popup window:

<a href="https://www.ryanware.com/" onClick="popupWindow(this.href,'name');return false;">450x280 popup window positioned at x 150, y 150</a>

<a href="https://www.ryanware.com/" onClick="popupWindow(this.href,'name','','','',600);return false;">450x280 popup window positioned at x 150, y 600</a>

<a href="https://www.ryanware.com/" onClick="popupWindow(this.href,'name','',100);return false;">450x100 popup window positioned at x 150, y 150</a>

<a href="https://www.ryanware.com/" onClick="popupWindow(this.href,'name',500,600,350,450);return false;">500x600 popup window positioned at x 500, y 600</a>

<a href="https://www.ryanware.com/" onClick="popupWindow(this.href,'name','',700,'',600);return false;">450x700 popup window positioned at x 150, y 600</a>

That’s it! Enjoy!

← 
 →
Posted by Programming