Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a popup window?

Tags:

javascript

Center a popup window on screen? these don't work in Chrome w/ multimonitor. The "screen" seems to refer to the entire desktop, not just the current window. I want to center the popup window within the browser. How can I do that? Needs to be cross-browser.

like image 959
mpen Avatar asked Apr 15 '11 19:04

mpen


People also ask

How do I center a pop up window in CSS?

Either use jQuery to calc / set the left, or put popup in a container that is full-width, and has text-align: center on it.

How do I center a pop up modal?

In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.

How do I center a pop up form in HTML?

Your js function, fg_popup_form, is handling the center for you. It runs this function, called window. center(), that centers your popup. However if you don't enter the correct width and height of your popup element, it won't position itself correctly.


1 Answers

Here's a demo (should load Google):

function popupwindow(url, title, w, h) {
  wLeft = window.screenLeft ? window.screenLeft : window.screenX;
  wTop = window.screenTop ? window.screenTop : window.screenY;

  var left = wLeft + (window.innerWidth / 2) - (w / 2);
  var top = wTop + (window.innerHeight / 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);
}
<button onclick="popupwindow('http://www.google.com/', 'hello', 400, 400)">
   Click
</button>
like image 71
Blender Avatar answered Oct 08 '22 00:10

Blender