How to open new window (popup) and center on screen

Submitted by Nima Mehrabany on Wed, 04/16/2014 - 08:17

Method 1: Center a popup window on screen

Here is a java script function that opens a new window (popup) and puts it on center of screen:
With new suggested improvements thanks to long beach web design


function popupCenter(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

The link sample:
<a onclick="popupCenter('', 'myPop1',450,450);" href="javascript:void(0);">CLICK TO OPEN POPUP</a>

This is a COPY and PASTE script, tested on Chrome, Internet Explorer and Firefox .

Method 2: Center a popup window on screen (Single / Dual Monitor solution).

Thanks to


<script type="text/javascript">
function PopupCenterDual(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop :;

width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow =, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

// Puts focus on the newWindow
if (window.focus) {

Usage Example:

<a onclick="PopupCenterDual('','NIGRAPHIC','450','450'); " href="javascript:void(0);">CLICK TO OPEN POPUP</a>

The link sample:

kato (not verified)

Mon, 02/18/2008 - 18:56

How can you change the background color of the pop-up? thanks in advance kato

Java Tutorial | Java Interview Questions | Groovy Tutorial | Automation Testing Tutorial | Java Interview Questions | Data Structurre and Algorithem

The only way of changing background color is using CSS and styles.
The background color is not related to the above java script code, actually the code opens a PAGE (maybe HTML, ASP, PHP, ...).
You have to work on page file, the following lines of HTML & CSS shows a way to change the background of page.


I hope it helps you.

amanique (not verified)

Wed, 03/12/2008 - 15:54

Hello, i need your help

I Have this code for a float menu, i want it to stay 1024px from Left, but on laptops, with a diferent resolution, the position of float menu changes, it is still 1024px but no longer at the distance that i want. I need some kind of distance from the center of the page, only i don't know how to do it, can you help me?

Here's my code:

<div id="divTopLeft" style="position:absolute">
<!-- Start - my content here --->
<div><a href="fotografia.php"><img src="images/fotoBarraLateral.jpg" border="0" /></a></div>
<!-- End - my content here --->

<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers); = = sx; = = sy;

var pX, pY;
pX = ( >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight; += (pX + -; += (pY + -;
setTimeout( + "_obj.floatIt()", 40);
return el;
JSFX_FloatDiv("divTopLeft", 1024,220).floatIt();
<!-- ********************************************************* -->

Dale (not verified)

Mon, 04/21/2008 - 15:09

I'd like to make a bookmarklet from this so that I can pop up a plain window to use for webcams, etc, but haven't been successful. Any help would be appreciated. Thanks!

ktsixit (not verified)

Tue, 05/13/2008 - 23:07

i like this script but i would like you to tell me what should i do to add a "previous" and "next" link button in the pop up window, so the user doesnt have to open and close windows all the time, if he likes to see more pictures.... any ideas?

Allan (not verified)

Sat, 06/28/2008 - 00:01

I use a similar code to open a window from a button... it works in Firefox - but not IE&. It used to work in IE6... can anyone help?

The call is from a

input statement:-

The javascript is:-

Somehow IE7 reports an error at the 'win' statement in the penultimate line....

thanks in anticipation


Anonymous (not verified)

Tue, 08/26/2008 - 21:47

How to create the opened windows not realizable?

Anonymous (not verified)

Sun, 12/21/2008 - 20:43

I have found interesting sourc and would like to give the benefit of my experience to you.
I am tuning my pc by the best software for free, with the file search engine
<a href="">DownLeZ</a>
May be you have your own experience and could give some useful sites too. Because this social site help me much.

anupam (not verified)

Fri, 01/02/2009 - 15:38


I am using window.showModalDialog to open a pop up window in Firefox.
The window is not centered and opens in top left corner of the screen.

retval = window.showModalDialog(sUrl,wName,"dialogWidth:54;dialogHeight:27.25;center:on; status=no;toolbar=no;menubar=no;resizable=yes");

Have used center attribute but still it is not working.
Kindly help me out.

chris (not verified)

Sat, 02/14/2009 - 08:28

Using your script to open a pdf file with the user clicking on text to open pdf in new/centered window.

Scripts works great on a Mac with Safari.
With Firefox 2, it tries to open in the next tab, fails, and closes tab.
In Shiira, tries to open in new tab, error message, page not found.
InExplorier 5.5, it opens in a full screen as well as another window with the right size but no pdf.

Same with Opera, it opens 2 windows, one centred and the right size, but page is blank.
2nd window full screen with pdf showing.

On the PC side: All appears to be good.

To see what I am referring to on the mac

Bottom of page - Newsletter ––> Connections

"You can also view our print and electronic newsletter for Integrated Communication called Connections a form of communication to introduce you to the workshops that Dr. Björn facilitates."

Thanks for you support on this

Anonymous (not verified)

Wed, 06/10/2009 - 11:14

Thanks Dude.
I got my solution with ur post

Anonymous (not verified)

Tue, 08/27/2013 - 14:17

Thanks for useful information for center popup windows!
This is a good trick that every web design company should have in its toolbox for designing websites. However, pop ups are also not very user friendly or designer friendly. The new technology that I have seen many designers use is pop-in. See it on this website

So the idea is to replace
with this

by doing this trick, if java script is disabled, the standard link will still work.

Simple Instagram Feed