getButterfly Logo getButterfly

Today’s tutorial is about Javascript popups and how to show 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 Javascript code:

function window_popup(content, x, y, title) {
    var thisWindow;
    thisWindow =, title, "width="+x+", height="+y+", scrollbars=auto, screenX=0, screenY=0, toolbar=no, location=no, menubar=no");

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 the role of the window is.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

14 thoughts on “Javascript centered popup window

  1. 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.

  2. 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.


  3. 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.


  4. 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 forums.

  5. 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

  6. 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 >

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

    does not work. confirmed.

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

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

  9. I used your snippets in a plugin I did for WordPress to open an image when a link is clicked on in the sidebar. It works great in Firefox and Google Chrome but for the life of me I can’t get it to work in IE (I have version 8 and have popups allowed). When I click on the link in IE I just get an “error on page” message at the bottom of the browser.

    Any ideas?

    1. Well, you should double click on that error icon and tell me what it says.

      Or, send me a copy of your plugin.

      Anyway, IE is not really supported, be it version 6 or 8.

Leave a Reply

Your email address will not be published. Required fields are marked *