I know pop-up windows are generally considered to be a bad thing; however, this script has served me well over the years and so I thought I’d share it.
This simple JavaScript creates a new web browser window perfectly centered within a browser window of any size. The formatting of the window is set within the HTML code of the link.
Place the JavaScript in an external file to easily create multiple, differently formatted pop-up windows from any page on your web site–all you need to do is change the variables in the HTML code of each link.
The script works in all the major web browsers: Internet Explorer, Netscape, Mozilla and Opera.
View examples of this script in action.
The Code
STEP 1. Insert the script in your page. Put the following script in the <head> section of your launching page.
<script type="text/javascript" language="JavaScript">
// Centered Pop-Up Window (v1.0) // (C) 2002-2005 www.smileycat.com // Free for all users, but leave in this header
var win = null; function newWindow(mypage,myname,w,h,features) { var winl = (screen.width-w)/2; var wint = (screen.height-h)/2; if (winl < 0) winl = 0; if (wint < 0) wint = 0; var settings = 'height=' + h + ','; settings += 'width=' + w + ','; settings += 'top=' + wint + ','; settings += 'left=' + winl + ','; settings += features; win = window.open(mypage,myname,settings); win.window.focus(); } </script>
STEP 2. Launch the popup window. Call the script from a link, like this:
<a href="#null" onClick="newWindow('yourpage.html','','750', '450','resizable,scrollbars,status,toolbar')"> Open in new window</a>
// Variables:
// 750 - width // 450 - height // resizable - window can be resized // scrollbars - window displays the scrollbar on the right // status - window displays the status bar at the bottom // toolbar - window displays the toolbar at the top
Note: href="#null" makes the link display as a link. Don’t leave it out!
A Note of Caution
Remember, if you plan to use this script, think very carefully about whether it is actually a good idea to make the page open in a new window.
This article from Sitepoint, Beware of Opening Links in a New Window, explains why it probably is not.
A nice little self contained script, I like it 🙂
One minor point: you might want to think about changing your pop-up hyperlink to something like:
[a href=”yourpage.html” onClick=”newWindow(‘yourpage.html’,”,’750′,’450′,’resizable,
scrollbars,status,toolbar’);return false”]View[/a]
As this will mean those without Javascript will still be able to access the linked content.
Richard, that’s a good suggestion, and one that I’ll incorporate. Thanks!
Great web site!!!
I was wonder if there is away to program a pop up window in timely fashion way say like every 5 minutes where an ad appears on your web site. This would be great if you are marketing a product or so.
What do you think?
I would love to have a pop up window for my site may be every 10 minutes or so. Can this be done?
Take care
http://www.peterswebdesign.com
Peter,
Although I’m sure this can be done, I would have to question whether you would want to do this. In my opinion this could make for a very annoying user experience and you would likely end up sending people away from your site.
Better to market a product through great copy which provides compelling reasons for the visitor to buy the product.
However, if you really did want to do this, you could probably find what you need at somewhere like Hotscripts.com.