# Centering JavaScript popup window

**URL:** <https://forum.kirupa.com/t/centering-javascript-popup-window/263664>\
**Category:** web dev\
**Created:** [June 18, 2008, 3:59am UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664 "2008-06-18T03:59:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![GGMcGee](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@GGMcGee](https://forum.kirupa.com/u/GGMcGee)\
**Post date:** [June 18, 2008, 3:59am UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664/1 "2008-06-18T03:59:43Z")

</div>

Hi,

I’ve got some Javascript that creates a popup window. I was wondering what I can add in to make the popup center itself on the user’s screen?

> [@JavaScript in &lt;head&gt;](#):
>
> \<script type=“text/javascript”\>  
> var newwindow;  
> function popup(url)  
> {  
> newwindow=window.open(url,‘name’,‘scrollbars=1,height=505,width=690’);  
> if (window.focus) {newwindow.focus()}  
> }  
> // –\>  
> \</script\>

Only code I can find pushes the window however many pixels right and down… I was hoping for some sort of ‘50% screen width/50% screen height’ variables, so it works for every resolution.

Help is much appreciated. 🙂

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [June 18, 2008, 4:32am UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664/2 "2008-06-18T04:32:49Z")

</div>

The center point is measured from top and left, therefore 50% will push your little dudes left hand side to the middle and the top point to the middle. You have to use a formula like:

var left = clientWidth/2 - windowWidth;  
var top = clientHeight/2 - windowHeight;

moveTo(left,top);

Something along those lines, that borders between real and pseudo code. If you need further explanation as to why you have to use this kind of code, let me know.

---

<div class="post-metadata">

**Author:** ![GGMcGee](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@GGMcGee](https://forum.kirupa.com/u/GGMcGee)\
**Post date:** [June 18, 2008, 5:08am UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664/3 "2008-06-18T05:08:00Z")

</div>

Thanks for the reply!

I can’t think for myself that much when it comes to JavaScript. It isn’t really my forte. I tend to only use it when I have to… so I’m not that experienced.

I had some other script that I tried, but it just didn’t work. I don’t know why it didn’t work… it just didn’t.

This was it:

> 

\<script type=“text/javascript” language=“JavaScript”\>  
function popup(url)  
{  
scrolling = ‘yes’; // Scrolling Yes/No/Auto  
pagename = ‘view’; // popup height  
popht = 505; // popup height  
popwth = 690; // popup width  
scrleft = (screen.width / 2) - (popwth /2); //centres horizontal  
scrtop = ((screen.height / 2) - (popht /2)) - 40; //centres vertical  
window.open(url,’YBI’,‘top=’ + scrtop + ‘,left=’ + scrleft + ‘,height=’ + popht + ‘,width=’ + popwth + ‘,scrollbars=yes,resizable=no’);  
}  
// –\>  
\</script\>

(and because it didn’t work, I went back to the simpler popup code)

Can I add in the part you posted to my existing code, or was it all pseudo code to help me try to figure it out myself? Because if it was just pseudo code I have no chance XD. lol

The extent of my JavaScript knowledge is Googling what I’m after, copy and pasting, and understanding bits and pieces as I go for future reference.

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [June 18, 2008, 4:20pm UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664/4 "2008-06-18T16:20:06Z")

</div>

[quote=GGMcGee;2344717]Thanks for the reply!

Can I add in the part you posted to my existing code, or was it all pseudo code to help me try to figure it out myself? Because if it was just pseudo code I have no chance XD. lol[/quote]

No problem, that was more real code than pseudo code, but I wouldn’t use my code I previously posted without modification. BTW, you have every chance in the world.

Here is a working example (feel free to use it as is):

```auto
<script type="text/javascript">
var win;

function popupWin(w,h,page)
{
   //get the width and height of the window
    var wide = w;
    var high = h;
    
    //this gets the total available width and height of the users screen
    screen_height = window.screen.availHeight;
    screen_width = window.screen.availWidth; 

    //this gets the left and top point by saying total width of the screen divided by 2 (center), minus the width of your window divided by 2, which make its center point the middle of the screen. Same for the top
    left_point = parseInt(screen_width/2)-(wide/2); 
    top_point = parseInt(screen_height/2)-(high/2); 

    //just doing a simple popup window here, but plugging your info into it, and setting the top and left corners to be our calculated points that will center your window.
    win = window.open(page, 'win', 'width='+wide+',height='+high+',left='+left_point+',top='+top_point+',toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no'); //make sure your window is in the front 
    win.focus(); 
}
</script>

```

Call it like so:  
//popupWin(width, height, url)  
popupWin(400, 400, ‘[http://www.kirupa.com](http://www.kirupa.com)’);

Still have questions?

---

<div class="post-metadata">

**Author:** ![GGMcGee](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@GGMcGee](https://forum.kirupa.com/u/GGMcGee)\
**Post date:** [June 19, 2008, 12:01am UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664/5 "2008-06-19T00:01:17Z")

</div>

Thank you very much.

Works great! 😃

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [June 19, 2008, 1:55am UTC](https://forum.kirupa.com/t/centering-javascript-popup-window/263664/6 "2008-06-19T01:55:11Z")

</div>

No problem!