Jump to content

Centering the popup form

Go to solution Solved by kicken,

Recommended Posts


I went a little backwards in my learning and got into php before JS. I spend several hours looking around google though no luck. Below I have a JS that is used for a form submit. It's the only way I've been able to successfully have the form submitted to a popup without having to use a modal (because the page has 15 forms so they all need a different one, this way I can and just name them differet).

The things I have been pulling my hair out trying is centering the form on the page, putting a header title on the window (like in a modal), and having some nice transition to appear on the screen. NONE of these three things I have been able to do. SO
I thought I would come here and see if I can get some help making what I have below center in the screen (complete middle from top and sides)

Did I ramble too much? I'm sorry. I had a LOT of coffee and have been at this web project for 14 hours straight (not just this script, the whole page)


$(document).ready(function() {
    $('#myform50').submit(function() {
        window.open('', 'formpopup', 'width=400,height=800,resizeable,scrollbars');
        this.target = 'formpopup';


Link to comment
Share on other sites

  • Solution

Been a long time since I used a positioned popup window.  Had to check the docs for the right options.

You can center the popup on the screen by setting the top / left options.  These control the top-left corner of the window, so to get it truly center you have to calculate the right offset.  There's a standard formula for this.

centerPoint = (sizeOfContainer - sizeOfThing) / 2

For this case, your sizeOfContainer is the screen width/height and the sizeOfThing are your popup window's width/height.  Run that formula for each to get your top/left values and set them in the window options.

const popupWidth = 400, popupHeight = 800;
let top = (window.screen.height - popupHeight)/2;
let left = (window.screen.width - popupWidth)/2;
const win = window.open('', 'formpopup', 'width='+popupWidth+',height='+popupHeight+',resizable,scrollbars,top='+top+',left='+left);

The final result may be slightly off (mostly in the height axis) due to the window UI elements since they are not part the calculation.  The width/height you specify is for the content area of the window, the UI elements are added on top of that.  If the slight offset bugs you, you can fix it after opening the window by re-calculating the offset using the window's outerWidth and outerHeight values for sizeOfThing, then using it's moveTo function to re-position it.

top = (window.screen.height - win.outerHeight)/2;
left = (window.screen.width - win.outerWidth)/2;
win.moveTo(left, top);

That may create a noticeable jump after the window opens though.

  • Like 1
Link to comment
Share on other sites

@kicken Thank you. Even with that it was still staying at the bottom right corner of the screen but that is because it's my set up. I have 5 monitors so I got to thinking maybe that is why. So I tested it on a laptop and your information worked. Apparently if you have multiple monitors it's thrown way off. Which is odd to me because I would think it would only be looking at the browser window itself. But it's okay because I know most viewers are not going to be looking at it with multiple monitor set ups. Thank you much for your help with that :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.