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

Method 1: Center a popup window on screen

Here is a java script function that opens a new window (popup) and puts it on center of screen:
With new suggested improvements thanks to long beach web design
<script>
function popupCenter(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/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);
}
</script>
The link sample:
<a onclick="popupCenter('http://www.nigraphic.com', 'myPop1',450,450);" href="javascript:void(0);">CLICK TO OPEN POPUP</a>

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

Method 2: Center a popup window on screen (Single / Dual Monitor solution).

Thanks to http://www.xtf.dk
<script type="text/javascript">
function PopupCenterDual(url, title, w, h) {
    // Fixes dual-screen position   Most browsers   Firefox
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;
    var top = ((height / 2) - (h / 2)) + dualScreenTop;
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    // Puts focus on the newWindow
    if (window.focus) {
        newWindow.focus();
    }
}
</script>
Usage Example:
<script>
<a onclick="PopupCenterDual('http://www.nigraphic.com','NIGRAPHIC','450','450');  " href="javascript:void(0);">CLICK TO OPEN POPUP</a>
</script>


No comments:

Post a Comment