webentwicklung-frage-antwort-db.com.de

Wie positioniere ich den Div-Popup-Dialog in der Mitte des Browser-Bildschirms?

Ich muss div popup in der Mitte des Browser-Bildschirms positionieren (unabhängig von der Größe des Bildschirms). Und ich möchte die Position so absolut halten, dass ich das Popup nicht nach unten verschieben möchte, wenn ich die Seite nach unten scrolle.

Dieses Div wird angezeigt, wenn Sie mit Jquery auf die Schaltfläche klicken.

Ich habe versucht, den linken Rand auf die Hälfte der Breite einzustellen, wie in anderen Beiträgen erwähnt, aber es funktioniert nicht für mich.

Hier ist mein Code

CSS-Code:

.holder{        
    width:100%;
    position:absolute;
    left:0;
    top:0px;
    display:block;  
}
.popup{
    width:800px;
    margin:0 auto;
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;
}

.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}

HTML Quelltext:

  <div class="holder">
        <div id="popup" class="popup">            
            <div class="content">
                        some lengthy text
                     </div>
        </div>
   </div>

Vielen Dank!!

7
S K

Hier arbeiten diese. :)

http://jsfiddle.net/nDNXc/1/

upd: Nur für den Fall, dass jsfiddle nicht reagiert, ist hier der Code ...
CSS:

.holder{        
    width:100%;
    display:block;
}
.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}
.popup{
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;  
    // here it comes
    position:absolute;
    width:800px;
    top: 50%;
    left: 50%;
    margin-left: -400px; // 1/2 width
    margin-top: -40px; // 1/2 height
}

HTML:

<div class="holder">     
    <div id="popup" class="popup">            
        <div class="content">some lengthy text</div>
    </div>
</div>
17
Jassi
.popup-content-box{
    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%);
}
19
Nikhil Mathew

Sie können CSS3 'transform' verwenden:

CSS:

.popup-bck{
  background-color: rgba(102, 102, 102, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.popup-content-box{
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

HTML:

<div class="popup-bck"></div>
<div class="popup-content-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>

* Sie müssen also nicht margin-left: -width/2 px; verwenden

Ich schreibe einen Code in Jquery. Es ist kein einfacher Weg gesehen. Aber ich hoffe es ist nützlich für dich.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">

.popup{
    border: 4px solid #6b6a63;
    width: 800px;
    border-radius :7px;
    margin : auto;
    padding : 20px;
    position:fixed;
}

</style>

<div id="popup" class="popup">
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    var popup_height = document.getElementById('popup').offsetHeight;
    var popup_width = document.getElementById('popup').offsetWidth;
    $(".popup").css('top',(($(window).height()-popup_height)/2));
    $(".popup").css('left',(($(window).width()-popup_width)/2));
});
</script>
5
FURKAN ILGIN

Hinweis: Dies beantwortet Ihre Frage nicht direkt. Das ist absichtlich.

Eine Liste nebeneinander hat einen ausgezeichneten CSS Positioning 101 Artikel, der es wert ist, gelesen zu werden ... Es gibt zahlreiche Beispiele, zu denen unter anderem Ihr spezifisches Problem gehört. Ich empfehle es sehr.

2
Peter Rowell

Dies ist ein klassisches Problem: Wenn Sie einen Bildlauf durchführen, bleibt das modale Popup, das auf dem Bildschirm generiert wird, an seinem Platz und wird nicht weiter gescrollt, sodass der Benutzer möglicherweise blockiert wird, da er das Popup möglicherweise nicht auf seinem Bildschirm sieht.

Der folgende Link enthält auch nur CSS-Code zum Generieren einer modalen Box mit ihrer absoluten Position.

http://settledcuriosity.wordpress.com/2014/10/03/centering-a-popup-box-absolutely-at-the-center-of-screen/

2
Abhishek Jain

Es hat eine Weile gedauert, die richtige Kombination zu finden, aber dies scheint den Overlay- oder Popup-Inhalt horizontal und vertikal zu zentrieren, ohne vorherige Kenntnis der Inhaltshöhe :

HTML:

<div class="overlayShadow">
    <div class="overlayBand">
        <div class="overlayBox">
            Your content
        </div>
    </div>
</div>

CSS:

.overlayShadow {
    display: table;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 20;
}

.overlayBand {
    display: table-cell;
    vertical-align: middle;
}

.overlayBox {
    display: table;
    margin: 0 auto 0 auto;
    width: 600px; /* or whatever */
    background-color: white; /* or whatever */
}
1

Ich denke, Sie müssen den .holderposition:relative; und .popupposition:absolute; machen

0
Danferth

Eine Lösung, bei der wir die Breite/Höhe des Dialogs nicht kennen müssen und dann die Ränder annehmen. 

Html:

<div id="dialog-contain">  <-- This div because I assume you might have a display that is not a flex. '
    <div id="block">
        <div id="centered">
            stuffs
        </div>
    </div>
</div>

Css:

#dialog-contain { // full page container.
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    ...
}

#block {  // another container simply with display:flex.
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
}

#centered {   // another container that is always centered.
    align-self: center;
}
0
rjbaj