Centering the popup form

[PNewCode]

Hello,

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)

 

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

 

[kicken]

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.

[PNewCode]

@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