it-swarm.com.de

Wie lässt sich Popup in der Bildschirmmitte anzeigen?

Wenn ich auf einen Link klicke, erscheint ein Popup. Die Sache ist, dass es nicht auf die Mitte des Bildschirms ausgerichtet ist. Mein Code hilft übrigens auch, dass die Website (und das Popup) in einer mobilen Version perfekt aussehen. 

Der HTML-Code:

<a href="#" data-reveal-id="exampleModal">POP UP</a>

<div id="exampleModal" class="reveal-modal">
     <h2>POP UP</h2>
     <p>
     <font size="4">window window window.window window window. window.
         </font>
    </p>
    <a class="close-reveal-modal">×</a>
</div>

Der CSS-Code: 

 .reveal-modal     
  {
        background:#e1e1e1; 
        visibility:hidden;
        display:none;
        top:100px; 
        left:50%; 
        width:820px; 
        position:absolute; 
        z-index:41;
        padding:30px; 
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        box-shadow:0 0 10px rgba(0,0,0,0.4)
  }

Ich habe versucht, etwas richtigzustellen: 50%, aber es hat nicht funktioniert. Sollte die Arbeit nicht verlassen?

10
Apolo Radomer

Dies sind die folgenden Änderungen:

CSS:

#container {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    visibility: hidden;
    display: none;
    background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */
}
#container:target {
    visibility: visible;
    display: block;
}
.reveal-modal {
    position: relative;
    margin: 0 auto;
    top: 25%;
}
    /* Remove the left: 50% */

HTML:

<a href="#container">Reveal</a>
<div id="container">
    <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
    </div>
</div>

JSFiddle - Nur mit CSS aktualisiert

16
Deryck

Wenn der gewünschte Effekt darin besteht, in der Mitte des Bildschirms zu zentrieren, egal wo Sie gescrollt haben, ist dies noch einfacher: 

In Ihrer CSS-Verwendung (zum Beispiel)

div.centered{
  width: 100px;
  height: 50px;
  position:fixed; 
  top: calc(50% - 25px); // half of width
  left: calc(50% - 50px); // half of height
}

Kein JS erforderlich.

2
/*--------  Bootstrap Modal Popup in Center of Screen --------------*/
/*---------------extra css------*/
.modal {
    text-align: center;
    padding: 0 !important;
}
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
/*----- Modal Popup -------*/
<div class="modal fade" role="dialog">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h5 class="modal-title">Header</h5>
            </div>
            <div class="modal-body">
               body here     
             </div>
        <div class="modal-footer">            
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
1
Awadhesh Singh

Um das Popup genau zu zentrieren, müssen Sie lediglich einen negativen oberen Rand der halben Div-Höhe und einen negativen linken Rand der halben Div-Breite anwenden. Für dieses Beispiel wie folgt:

    .div {position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
0
anilam