come faccio a centrare javascript css popup div, indipendentemente dalla risoluzione dello schermo?

Ho il seguente codice che apre una nuova finestra pop-up durante la disattivazione sullo sfondo, il problema è che devo posizionare questo in modo che sia 100px dall'alto (già ottenuto che attraverso il #dialog CSS) e anche nel centro di lo schermo, non importa quale sia la risoluzione dell'utente?come faccio a centrare javascript css popup div, indipendentemente dalla risoluzione dello schermo?

<!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>

fonte

2012-06-13 user1227914

Si prega di formattare il codice correttamente in modo che sia leggibile. L'ho fatto per te questa volta. Inoltre, ho notato che non hai punti e virgola (';') nel tuo codice JavaScript, è una pessima pratica! Ogni istruzione dovrebbe essere terminata con un punto e virgola. –

CSS basato soluzione al centro:

È necessario utilizzare questi stili per farlo apparire punto morto:

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 */

Quindi occorre precisare position. Il top e left dovrebbero essere 50%. I valori margin-left e margin-top devono essere rispettivamente negativi per metà della larghezza e dell'altezza del riquadro.

Si noti che se si desidera che il pop-up di apparire sul centro, anche quando la pagina viene fatta scorrere si dovrà utilizzare position:fixed invece con il sorteggio schiena che non funziona in IE6.

fonte

2012-06-13 19:16:50 Sarfraz

Bella soluzione! Non avevo visto quello prima. – marlar

codice molto bello mi ha salvato molto tempo +1 da me! :-) – www139

Una veloce ricerca su Google ha trovato 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); 

}

fonte

2012-06-13 19:15:15

Semplice, margin: 100px auto;. Non c'è bisogno di fare calcoli in JavaScript.

Live Example

fonte

2012-06-13 19:15:58

Sta prendendo in considerazione la finestra popup in modo che appaia al centro di una lightbox, non un contenitore o qualche elemento wrapper – Sarfraz

@Sarfraz: in che modo questo diminuisce il valore della mia risposta? è 'margin' una proprietà mantenuta solo per i contenitori? 'margin: auto' è una ** tecnica ** per centrare un elemento nel suo genitore. –

Quello che ti serve è chiamato lightbox.

Per crearlo è necessario modificare codice HTML, CSS e JS.

Diciamo che il tuo lightbox consiste solo della stringa "login form". (Si può mettere tutto quello che volete lì) Il codice HTML dovrebbe essere così:

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

Ora, abbiamo bisogno di nasconderlo con i CSS:

div#loginBox { 
    display: none; 
}

Ora il nostro dialogo non è visibile. Consente di modificare i nostri schemi, come si vuole che sia 100px dall'alto:

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

Vi preoccupare la disattivazione del fondo in seguito.

Il nostro prossimo compito è quello di creare un pulsante che visualizzerà la casella quando ne abbiamo bisogno. Easy-peasy:

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

Si noti che non abbiamo bisogno l'attributo "href", perché che spostare lo schermo su clic e altri comportamenti indesiderati.

Diamo allegare gestore di eventi sul pulsante tramite 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); 
    } 
}

ma si vuole che sia al centro dello schermo?Poi la funzione va in questo modo:

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"; 
}

Direi che si vuole chiudere la finestra ad un certo punto e rendere l'effetto "disabile sfondo". Per fare ciò è possibile creare una classe div che si estende su tutto lo schermo, allegare un evento "display" su di esso, inserire qualche z-index nel css per essere sicuri che il loginBox sia sopra lo "sfondo disabilitato" e allegare un " chiudere l'evento "loginBox" sul div "background". E ora il codice finale è simile al seguente:

noti che ci interessa solo la posizione del pulsante di login, perché l'altro sono nascosti alla vista, e poi modificato da 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); 
    } 
}

fonte

2012-06-13 20:06:53 tsikov

Grazie, lo studierò in dettaglio :) – user1227914

Sei il benvenuto. Non esitare a chiedere chiarimenti, sarò lieto di aiutarti. – tsikov

È necessario utilizzare questi stili per fare centro div:

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

fonte

2014-05-27 06:11:27 lnegi

Questo è dove FlexBox viene soccorso subito!

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

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

fonte

2015-02-09 19:26:06

solo fare questo:

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

non importa la dimensione dello schermo o pop-up. Questo centrerà il <div class="popup"></div>.

fonte

2016-02-18 15:42:12

come faccio a centrare javascript css popup div, indipendentemente dalla risoluzione dello schermo?

risposta

Problemi correlati