it-swarm.com.de

wie zentriere ich Javascript CSS Popup Div, unabhängig von der Bildschirmauflösung?

Ich habe den folgenden Code, der beim Deaktivieren des Hintergrunds ein neues Popup-Fenster öffnet. Das Problem ist, dass ich dieses so positionieren muss, dass es 100px von oben (bereits über den CSS-Dialog #dialog) und auch in der Mitte des Bildschirms ist , egal wie hoch die Auflösung des Benutzers ist?

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

CSS-basierte Lösung zum Zentrieren:

Sie müssen diese Stile verwenden, damit sie im Mittelpunkt stehen:

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

Daher sollte position angegeben werden. Die top und left sollten 50% sein. Der margin-left und margin-top sollten jeweils eine Hälfte der Breite und Höhe der Box negativ sein. 

Beachten Sie, dass, wenn Sie möchten, dass Ihr Popup in der Mitte angezeigt wird, auch wenn die Seite gescrollt wird, Sie position:fixed verwenden müssen, mit der Einschränkung, dass es in IE6 nicht funktioniert.

37
Sarfraz

Was Sie brauchen, wird als Light-Box bezeichnet.

Um es zu erstellen, sollten Sie HTML-, CSS- und JS-Code ändern.

Angenommen, Ihre Lightbox besteht nur aus der Zeichenfolge "Login-Formular". (Sie können alles, was Sie wollen, dort ablegen) Der HTML-Code sollte folgendermaßen aussehen:

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

Nun müssen wir es mit CSS verstecken:

div#loginBox {
    display: none;
}

Nun ist unsere Box nicht sichtbar. Lass uns unsere Box so verändern, wie sie 100px von oben sein soll:

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

Wir werden uns später darum kümmern, den Hintergrund zu deaktivieren.

Unsere nächste Aufgabe ist es, eine Schaltfläche zu erstellen, die die Box anzeigt, wenn wir sie benötigen. Kinderleicht:

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

Beachten Sie, dass wir das Attribut "href" nicht benötigen, da dadurch der Bildschirm beim Klicken und anderes unerwünschtes Verhalten verschoben wird. 

Fügen wir dem Button einen Event-Handler über JS hinzu:

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

Aber Sie möchten, dass es sich in der Mitte des Bildschirms befindet? Dann geht die Funktion so:

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

Ich würde vermuten, dass Sie das Fenster irgendwann schließen und den "deaktivierten Hintergrund" -Effekt machen wollen. Dazu können Sie eine Div-Klasse erstellen, die sich auf den gesamten Bildschirm erstreckt, ein "Anzeige" -Ereignis anhängen, einen Z-Index in die CSS einfügen, um sicherzustellen, dass sich die loginBox über dem "deaktivierten Hintergrund" befindet, und ein "anhängen". Schließen Sie das loginBox-Ereignis auf der "background" -Div. Und jetzt sieht der endgültige Code so aus:

Beachten Sie, dass uns nur die Platzierung der Login-Schaltfläche wichtig ist, da die anderen nicht sichtbar sind und von JS geändert werden:

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 );
    }
}
4
tsikov

Hier kommt Flexbox jetzt retten!

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

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

Eine schnelle Google-Suche gefunden 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);

} 
2
John Conde

Mach einfach das:

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

nein, die Größe des Bildschirms oder des Popup Dadurch wird der <div class="popup"></div> zentriert.

1
Celso Soares

Einfach, margin: 100px auto;. In JavaScript müssen keine Berechnungen vorgenommen werden.

Live-Beispiel

1
Madara Uchiha

Sie müssen diese Stile verwenden, um das Zentrum zentrieren zu lassen:

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