Category: JavaScript

JavaScript centered popup window

Chip on 15 August 2007

Today’s tutorial is about JavaScript and how to pop up a window in the center of the screen and focus on it. The trick is easy and the containing function is small. Here it is the JS code:

function window_popup(content, x, y, title) { var thisWindow; thisWindow = window.open(content,title,"width="+x+",height="+y+",scrollbars=auto,screenX=0,screenY=0,toolbar=no,location=no,menubar=no"); thisWindow.moveTo((screen.width-x)/2,(screen.height-y)/3); thisWindow.window.focus(); }
And here is the caller:

<a href="#" onclick="window_popup('mypage.html', 400, 300, 'mypage')">Open My Page</a>

Remember to quote the page name and title, otherwise the script will generate an error. Popup window attributes can be changed in the second line of the function

scrollbars=auto,screenX=0,screenY=0,toolbar=no,location=no,menubar=no

depending on what is the role of the window.

9 Responses to JavaScript centered popup window

Web Design Glasgow says:
November 28, 2007

Hi, how cross-browser compatible is this solution? And does it put it in the centre of the window, regardless of vertical scroll position?

I’ve struggled a bit with this, and thought I might just use a solution like lightwindow.

Cheers

Reply
Chip says:
November 28, 2007

Well, your solution is scriptic, however my example is browser-based. The popup window is a physical one, while your example is JavaScript based.

I guess both are 100% cross-browser compatible.

Reply
michelle says:
April 24, 2008

Hi,

I was looking for a way to do pop up windows in wordpress. Do you know if your code will work in the wordpress HTML post section? I’ve been having difficulty making any type of javascript work in WP.

Thanks!

Reply
Chip says:
April 24, 2008

It should work like a charm, by putting the JavaScript code into a separate .js file, include it in the header (use correct path specification), and then use my example links.

Although I would recommend using a LightBox plugin for WordPress which has the ability to load images, HTML, iframes, AJAX content, videos, DIVs (actually these are HTML). I did not use LightBox, but you should be able to find some discussions on it on WordPress.org forums.

Reply
Carlos says:
November 5, 2008

Do you know if Google’s bot will see the link you want to pop up and index it?

I’m worried that when Google sees href=”#”, it will stop there and not see what is located on mypage.html

Reply
Chip says:
November 5, 2008

No, Google won’t see the pop-up, unless you use this:

< a href = "linkhere.html" onclick = "popup stuff here; return false;" >bla bla< / a >

Reply
Pingback: icone per blog + radio | lo stanzino di EngiMedia
Derrick says:
December 7, 2009

this opens a popup, but also opens the popup in the the main window.

does not work. confirmed.

Reply
Chip says:
December 8, 2009

@Derrick: Try replacing the ‘#’ with ‘javascript:return false’.

@Carlos: Again, you shouldn’t place content you want indexed by Google in popups.

Reply