javascript - open - ¿Centrar una ventana emergente en la pantalla?

windows open center javascript

Question

¿Cómo podemos centrar una ventana emergente abierta a través de la función javascript window.open en el centro de la variable de pantalla para la resolución de pantalla seleccionada actualmente?

Answer 1

Aquí hay una versión alternativa de la solución antes mencionada ...

function openPopupCenter(url, title, w, h) {
  // Fixes dual-screen position
  // Most browsers use window.screenLeft
  // Firefox uses screen.left
  var dualScreenLeft = getFirstNumber(window.screenLeft, screen.left),
    dualScreenTop = getFirstNumber(window.screenTop, screen.top),
    width = getFirstNumber(window.innerWidth, document.documentElement.clientWidth, screen.width),
    height = getFirstNumber(window.innerHeight, document.documentElement.clientHeight, screen.height),
    left = ((width / 2) - (w / 2)) + dualScreenLeft,
    top = ((height / 2) - (h / 2)) + dualScreenTop,
    newWindow = window.open(url, title, getSpecs());

  // Puts focus on the newWindow
  if (window.focus) {
    newWindow.focus();
  }

  return newWindow;

  function getSpecs() {
    return ''scrollbars=yes, width='' + w + '', height='' + h + '', top='' + top + '', left='' + left;
  }

  function getFirstNumber() {
    for(var i = 0, len = arguments.length; i < len; i++) {
      var value = arguments[i];

      if (typeof value === ''number'') {
        return value;
      }
    }
  }
}

Answer 2

Debido a la complejidad de determinar el centro de la pantalla actual en una configuración de múltiples monitores, una opción más fácil es centrar la ventana emergente en la ventana principal. Simplemente pase la ventana principal como otro parámetro:

function popupwindow(url, title, win, w, h) {
    var y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2)
    var x = win.top.outerWidth / 2 + win.top.screenX - ( w / 2)
    return win.open(url, title, ''toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=''+w+'', height=''+h+'', top=''+y+'', left=''+x);
} 

Answer 3

Facebook utiliza el siguiente algoritmo para colocar su ventana emergente de inicio de sesión:

function PopupCenter(url, title, w, h) {
  var userAgent = navigator.userAgent,
      mobile = function() {
        return //b(iPhone|iP[ao]d)/.test(userAgent) ||
          //b(iP[ao]d)/.test(userAgent) ||
          /Android/i.test(userAgent) ||
          /Mobile/i.test(userAgent);
      },
      screenX = typeof window.screenX != ''undefined'' ? window.screenX : window.screenLeft,
      screenY = typeof window.screenY != ''undefined'' ? window.screenY : window.screenTop,
      outerWidth = typeof window.outerWidth != ''undefined'' ? window.outerWidth : document.documentElement.clientWidth,
      outerHeight = typeof window.outerHeight != ''undefined'' ? window.outerHeight : document.documentElement.clientHeight - 22,
      targetWidth = mobile() ? null : w,
      targetHeight = mobile() ? null : h,
      V = screenX < 0 ? window.screen.width + screenX : screenX,
      left = parseInt(V + (outerWidth - targetWidth) / 2, 10),
      right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10),
      features = [];
  if (targetWidth !== null) {
    features.push(''width='' + targetWidth);
  }
  if (targetHeight !== null) {
    features.push(''height='' + targetHeight);
  }
  features.push(''left='' + left);
  features.push(''top='' + right);
  features.push(''scrollbars=1'');

  var newWindow = window.open(url, title, features.join('',''));

  if (window.focus) {
    newWindow.focus();
  }

  return newWindow;
}

Answer 4

Fuente: http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, 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);
  return targetWin;
} 

Answer 5

Funciona muy bien en Firefox.
Solo cambia la variable superior a cualquier otro nombre e inténtalo de nuevo

        var w = 200;
        var h = 200;
        var left = Number((screen.width/2)-(w/2));
        var tops = Number((screen.height/2)-(h/2));

window.open("templates/sales/index.php?go=new_sale", '''', ''toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=''+w+'', height=''+h+'', top=''+tops+'', left=''+left);

Answer 6

Mi recomendación es usar la ubicación superior 33% o 25% del espacio restante,
y no el 50% como otros ejemplos publicados aquí,
principalmente por el encabezado de la ventana ,
Que se ven mejor y más cómodos para el usuario.

código completo:

    <script language="javascript" type="text/javascript">
        function OpenPopupCenter(pageURL, title, w, h) {
            var left = (screen.width - w) / 2;
            var top = (screen.height - h) / 4;  // for 25% - devide by 4  |  for 33% - devide by 3
            var targetWin = window.open(pageURL, 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>
</head>
<body>
    <button onclick="OpenPopupCenter(''http://www.google.com'', ''TEST!?'', 800, 600);">click on me</button>
</body>
</html>

Echa un vistazo a esta línea:
var top = (screen.height - h) / 4; // para el 25% - dividir por 4 | para el 33% - dividir por 3

Answer 7

Puedes usar css para hacerlo, solo dale las siguientes propiedades al elemento que se colocará en el centro de la ventana emergente

element{

position:fixed;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);

}

Answer 8

Si desea centrarlo en el marco en el que se encuentra actualmente, le recomendaría esta función:

function popupwindow(url, title, w, h) {
    var y = window.outerHeight / 2 + window.screenY - ( h / 2)
    var x = window.outerWidth / 2 + window.screenX - ( w / 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='' + y + '', left='' + x);
} 

Similar a la respuesta de Crazy Tim, pero no usa window.top. De esta manera, funcionará incluso si la ventana está incrustada en un iframe de un dominio diferente.

Answer 9

inténtalo así:

function popupwindow(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);
} 

Answer 10

FUNCIÓN DE MONITOR INDIVIDUAL / DUAL (crédito para http://www.xtf.dk - ¡gracias!)

ACTUALIZACIÓN: ¡También funcionará en ventanas que no están al máximo en el ancho y alto de la pantalla ahora gracias a @Frost!

Si está en un monitor dual, la ventana se centrará horizontalmente, pero no verticalmente ... use esta función para tenerlo en cuenta.

function PopupCenter(url, title, w, h) {
    // Fixes dual-screen position                         Most browsers      Firefox
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;

    var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    var 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();
    }
}

Ejemplo de uso:

PopupCenter(''http://www.xtf.dk'',''xtf'',''900'',''500'');  

EL CRÉDITO VA A: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (solo quería unirme a esta página, pero en caso de que este sitio web no funcione) El código está aquí en SO, ¡salud!

Answer 11

function fnPopUpWindow(pageId) {
     popupwindow("hellowWorld.php?id="+pageId, "printViewer", "500", "300");
}

function popupwindow(url, title, w, h) {
    var left = Math.round((screen.width/2)-(w/2));
    var top = Math.round((screen.height/2)-(h/2));
    return window.open(url, title, ''toolbar=no, location=no, directories=no, status=no, ''
            + ''menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='' + w 
            + '', height='' + h + '', top='' + top + '', left='' + left);
}

<a href="javascript:void(0);" onclick="fnPopUpWindow(''10'');">Print Me</a>

Nota: tienes que usar Math.round para obtener el entero exacto de ancho y alto.