Wie wird Popup in der Mitte des Bildschirms angezeigt?

Question

Wenn ich auf einen Link klicke, erscheint ein Pop-up. Die Sache ist, dass es nicht auf die Mitte des Bildschirms ausgerichtet ist. Nebenbei hilft mein Code auch der Website (und dem Popup), in einer mobilen Version perfekt auszusehen.

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 richtig setzen: 50% als gut, aber es hat nicht funktioniert. Sollte die Arbeit nicht verlassen werden?

Answer 1

Dies sind die Änderungen vorzunehmen:

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 - Updated with CSS only