You are here

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

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

<script>
function popupCenter(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, 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);
}
</script>

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

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 http://www.xtf.dk

<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 : screen.top;

    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 = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus) {
        newWindow.focus();
    }
}
</script>

Usage Example:

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

The link sample:
CLICK TO OPEN POPUP

Comments

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

Hi,
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.

<body style="background-color:red;">
or
<body style="background-image:url(PATH-TO-IMAGE/SAMPLE.GIF;">

I hope it helps you.

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:

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)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 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;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 1024,220).floatIt();

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!

sorry I didn't get the point.
would you please tell me more or show me an example?

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?

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

Allan

How to create the opened windows not realizable?

This param makes this happen

resizable=no

good keep on rocking

Good one that really workd great

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
DownLeZ
May be you have your own experience and could give some useful sites too. Because this social site help me much.

Hi,

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.

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
URL ;
http://www.drbjornsauto.com/aboutus.html

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
chris

Good code, worked for me! :)

Nice !!!!!!!!!!!!! working

i need for all browser working code

Thanks Dude.
I got my solution with ur post

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 <a href="#" onclick="window.open('filename.htm');">
with this
<a href="file.htm" onclick="window.open('filename.htm');return false;">
by doing this trick, if java script is disabled, the standard link will still work.