¿cómo centro javascript css popup div, sin importar la resolución de la pantalla?

Tengo el siguiente código que abre una nueva ventana emergente mientras desactivo el fondo, el problema es que tengo que posicionar esto para que sea 100px desde la parte superior (ya lo obtuve a través del CSS #dialog) y también en el centro de la pantalla, sin importar cuál sea la resolución del usuario?¿cómo centro javascript css popup div, sin importar la resolución de la pantalla?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <script type="text/javascript"> 
     function showPopUp(el) { 
      var cvr = document.getElementById("cover") 
      var dlg = document.getElementById(el) 
      cvr.style.display = "block" 
      dlg.style.display = "block" 
      if (document.body.style.overflow = "hidden") { 
       cvr.style.width = "1024" 
       cvr.style.height = "100%" 
      } 
     } 
     function closePopUp(el) { 
      var cvr = document.getElementById("cover") 
      var dlg = document.getElementById(el) 
      cvr.style.display = "none" 
      dlg.style.display = "none" 
      document.body.style.overflowY = "scroll" 
     } 
    </script> 
    <style type="text/css"> 
     #cover { 
      display:  none; 
      position:  absolute; 
      left:   0px; 
      top:   0px; 
      width:   100%; 
      height:   100%; 
      background:  gray; 
      filter:   alpha(Opacity = 50); 
      opacity:  0.5; 
      -moz-opacity: 0.5; 
      -khtml-opacity: 0.5 
     } 

     #dialog { 
      display: none; 
      left:  100px; 
      top:  100px; 
      width:  300px; 
      height:  300px; 
      position: absolute; 
      z-index: 100; 
      background: white; 
      padding: 2px; 
      font:  10pt tahoma; 
      border:  1px solid gray 
     } 
    </style> 
</head> 
<body> 
<div id="cover"></div> 
<div id="dialog"> 
    My Dialog Content 
    <br><input type="text"> 
    <br><input type="button" value="Submit"> 
    <br><a href="#" onclick="closePopUp('dialog');">[Close]</a> 
</div> 
<a href="#" onclick="showPopUp('dialog');">Show</a> 

</body> 
</html>

Fuente

2012-06-13 user1227914

Formatee su código correctamente para que sea legible. Lo hice por ti esta vez. Además, noté que no tienes punto y coma (';') en tu código JavaScript, ¡eso es una muy mala práctica! Cada declaración debe terminar con un punto y coma. –

CSS basado solución al centro:

Es necesario utilizar estos estilos para que parezca punto muerto:

position:absolute; 
top:50%; 
left:50%; 
width:400px; /* adjust as per your needs */ 
height:400px; /* adjust as per your needs */ 
margin-left:-200px; /* negative half of width above */ 
margin-top:-200px; /* negative half of height above */

Así position debe especificarse. El top y el left deben ser 50%. El margin-left y el margin-top deben ser negativos a la mitad del ancho y la altura del cuadro, respectivamente.

Tenga en cuenta que si desea que su ventana emergente aparezca en el centro incluso cuando se desplaza la página, tendrá que usar position:fixed con el inconveniente de que no funciona en IE6.

Fuente

2012-06-13 19:16:50 Sarfraz

¡Buena solución! No había visto ese antes. – marlar

código muy agradable me ahorró mucho tiempo +1 de mí! :-) – www139

Una rápida búsqueda en Google encontró this;

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); 

}

Fuente

2012-06-13 19:15:15

Simple, margin: 100px auto;. No es necesario hacer cálculos en JavaScript.

Live Example

Fuente

2012-06-13 19:15:58

Está escribiendo sobre una ventana emergente para que aparezca en el centro, un poco de lightbox, no en un contenedor o en un elemento contenedor – Sarfraz

@Sarfraz: ¿Cómo disminuye eso el valor de mi respuesta? ¿'margen' es una propiedad guardada solo para contenedores? 'margin: auto' es una ** técnica ** para centrar un elemento en su elemento primario. –

Lo que necesita se llama light-box.

Para crearlo, debe modificar el código HTML, CSS y JS.

Digamos que su caja de luz consiste solamente en la cadena "formulario de inicio de sesión". (Usted puede poner todo lo que quiere allí) El código HTML debería tener este aspecto:

<div id = "loginBox">login form</div>

Ahora, tenemos que ocultarlo con CSS:

div#loginBox { 
    display: none; 
}

Ahora nuestra caja no es visible. Vamos a modificar nuestra caja como quiera que sea 100px desde la parte superior:

div#loginBox { 
    display: none; 
    top: 100px; 
}

Vamos a preocuparse acerca de cómo deshabilitar el fondo más adelante.

Nuestro próximo trabajo es hacer un botón que muestre el cuadro cuando lo necesitemos. Fácil-peasy:

<div id = "loginBox" >login form</div> 
<a id = "displayButton">login</a>

Tenga en cuenta que no es necesario el atributo "href", porque eso va a mover la pantalla de clic y otros comportamientos no deseados.

Vamos a adjuntar controlador de eventos en el botón a través de JS:

var IE = document.all ? true : false; // obligatory "browser sniffing" 

function display_box() { 
    document.getElementsById("loginBox").style.display = "inline-block"; // or "inline" 
} 

window.onload = function() { 
    var login_box = document.getElementsById("loginBox"); 
    if (!IE) { 
     login_box.addEventListener("click", display_box , false); 
    } 
    else { 
     login_box.attachEvent("onclick", display_box); 
    } 
}

pero que desea que sea en el centro de la pantalla?A continuación, la función es la siguiente:

function display_box() { 
    var theBox = document.getElementsById("loginBox").style, 
     left = document.width/2 - 50; // 150 because it is 300/2 

    theBox.display = "inline-block"; 
    theBox.left = left.toString() + "px"; 
}

yo supongo que tendrá que cerrar la ventana en algún momento y hacer que el efecto "discapacitado fondo". Para hacerlo, puede crear una clase div que se extienda en toda la pantalla, adjuntar un evento de "visualización" en ella, poner algún índice z en el CSS para asegurarse de que loginBox esté sobre el "fondo desactivado" y adjuntar un " cierre el "evento" loginBox en el "fondo" div. Y ahora el código final es el siguiente:

Nótese que sólo se preocupan por la colocación del botón de inicio de sesión, porque el otro están a la vista, y luego modificado por JS:

HTML:

<div id = "loginBox" >login</div> 
<a id = "displayButton">login</a> 
<div id = "backgroundDarkener"> </div>

CSS:

div#loginBox { 
    display: none; 
    top: 100px; 
    width: 300px; #it is important to know the width of the box, to center it correctly 
    z-index: 2; 
} 
div#backgroundDarkener { 
    background: #000; 
    display: none; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.8; 
    # needless to say, you should play with opacity or if you want your 
    # css to validate - background image (because I suspect it won't 
    # validate for old versions of IE, Safari, etc.) This is just a suggestion 
}

JS:

var IE = document.all ? true : false; // obligatory "browser sniffing" 

function display_box() { 
    var theBox = document.getElementsById("loginBox").style, 
     background = document.getElementsById("loginBox").style, 
     left = document.width/2 - 150; // 150 is 300/2 

    theBox.display = "inline-block"; 
    theBox.left = left.toString() + "px"; 
    background.display = "inline-block"; 
} 
function hide_box() { 
    document.getElementsById("loginBox").style.display = "none"; 
    document.getElementsById("backgroundDarkener").style.display = "none"; 
} 

window.onload = function() { 
    var login_box = document.getElementsById("loginBox"), 
     background = document.getElementsById("backgroundDarkener"); 

    if (!IE) { 
     login_box.addEventListener("click", display_box , false); 
     background.addEventListener("click", hide_box , false); 
    } 
    else { 
     login_box.attachEvent("onclick", display_box); 
     background.attachEvent("onclick", hide_box); 
    } 
}

Fuente

2012-06-13 20:06:53 tsikov

Gracias, voy a estudiar eso en detalle :) – user1227914

Eres bienvenido. No dude en pedir aclaraciones, estaré encantado de ayudarlo. – tsikov

Es necesario utilizar estos estilos para hacer centro div:

width:500px; 
left:0; 
right:0; 
margin:0 auto;

Fuente

2014-05-27 06:11:27 lnegi

Aquí es donde viene FlexBox rescate ahora!

.parent { 
    display: flex; 
    height: 300px; /* Or whatever */ 
} 

.child { 
    width: 100px; /* Or whatever */ 
    height: 100px; /* Or whatever */ 
    margin: auto; /* Magic! */ 
}

Fuente

2015-02-09 19:26:06

a hacer esto:

.body { 
    position: relative; 
} 
.popup { 
    position: absolute; 
    max-width: 800px; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

no importa el tamaño de la pantalla o ventana emergente. Esto centrará el <div class="popup"></div>.

Fuente

2016-02-18 15:42:12

¿cómo centro javascript css popup div, sin importar la resolución de la pantalla?

Respuesta

Cuestiones relacionadas