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

Here is a java script function that opens a new window (popup) and puts it on center of screen:

<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, 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 example would be like this:
<a href="javascript:void(0);" onclick="PopupCenter('http://www.nigraphic.com', 'myPop1',400,400);">CLICK TO OPEN POPUP</a>
CLICK TO OPEN POPUP

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

 

Comments

Useful information for center popup windows!

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.

POP UP Screen

Thanks Dude.
I got my solution with ur post

Good code, worked for me! :)

Good code, worked for me! :)

code

i need for all browser working code

pop up image at center

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

Issues with window opening in different broswers

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

pop up window is not centered

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.

I have found interesting

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.

Good one that really workd

Good one that really workd great

good keep on rocking

good keep on rocking

stop realizable

How to create the opened windows not realizable?

resizable=no

This param makes this happen

resizable=no

Using a button to call the code

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

i like this script but i

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?

bookmarklet from above code

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!

I didn't get the point

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

Positioning Javascript

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();

changing background color

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

CSS + HTML

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.

Post new comment

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.