Category: JavaScript

JavaScript centered popup window

Chip on August 15, 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.

14 Responses to JavaScript centered popup window

Web Design Glasgow (12 comments) 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 (280 comments) 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 (1 comments) 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 (280 comments) 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 (1 comments) 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 (280 comments) says:
November 5, 2008

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

bla bla

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

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

does not work. confirmed.

Reply
Chip (280 comments) 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
Alida (3 comments) says:
February 5, 2011

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?

Reply
- Chip (280 comments) says:
  February 6, 2011
  
  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.
  
  Reply
  - Alida (3 comments) says:
    February 7, 2011
    
    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. ‘)‘;
    }
    else
    {
    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.
  - Chip (280 comments) says:
    February 7, 2011
    
    @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: http://stackoverflow.com/questions/1328723/how-to-generate-simple-pop-up-using-jquery – 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: http://www.constructeng.com/business-links/ – here’s the second: http://emeraldbeautyclinic.com/treatments
    
    Both of them required theme modifications, but in the end I got them cross-browser. No issues with popup blockers, no issues with IE.
Alida (3 comments) says:
February 9, 2011

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

Reply