submit to reddit

  • Sharebar

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 =,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


depending on what is the role of the window.

14 Responses to JavaScript centered popup window

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


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

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


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

  • 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

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

    bla bla

  • Pingback: icone per blog + radio | lo stanzino di EngiMedia

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

    does not work. confirmed.

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

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

  • 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?

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

      • Thanks for the reply. The error message says:

        Message: Invalid argument.
        Line: 80
        Char: 1
        Code: 0

        Which doesn’t explain much. I added the function to the WordPress header by including the following in the theme’s functions.php file :

        function window_pop() {
        echo ‘


        add_action(‘wp_head’, ‘window_pop’);

        And then I call the function in a plugin file as follows (the $rows are gotten from a database select):

        echo ”;
        foreach ($rows as $row)
        if ($row->dog_image != ”)
        echo ‘image . ‘\’, 400, 300, \’Dog in Training\’)”>’ . $row->dog_name . ‘ (‘. $row->dog_breed. ‘)‘;
        echo ” . $row->dog_name . ‘ (‘. $row->dog_breed. ‘)’;
        echo ” ;

        If there isn’t a workaround in IE its no biggie – I just picked it up when I was testing for a client.

      • @Alida: First of all, I tried it myself and it works just fine, so it must be a conflict with some WordPress JavaScript.

        Second, and most important, it’s not a correct approach. JavaScript popups are obsolete, deprecated, dangerous and old. You should take advantage of WordPress’s jQuery and create a popup.

        For example, look here: – Just remember to replace the dollar sign ($) with jQuery inside your WP code.

        I had to use popups for 2 clients using WordPress. I used iBox, a small JavaScript library that did the job exemplary. Here’s one example: – here’s the second:

        Both of them required theme modifications, but in the end I got them cross-browser. No issues with popup blockers, no issues with IE.

  • Thanks for the info about IBox – quick and easy to use and looks much better than an old popup.


Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>