Po kliknięciu łącza pojawia się wyskakujące okienko. Chodzi o to, że nie jest wyrównany do środka ekranu. Przy okazji mój kod pomaga również stronie internetowej (i wyskakującemu ekranowi) doskonale wyglądać w wersji mobilnej.Jak zrobić wyskakujące okienko na środku ekranu?
Kod HTML:
<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>
kod CSS:
.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)
}
Próbowałem oddanie jakieś prawo: 50% jak dobrze, ale to nie działa. Czy nie powinno się opuścić pracy?
Albo użyć jQuery calc/ustaw lewy lub umieść p opup w pojemniku, który ma pełną szerokość i ma wyrównanie tekstu: na środku. –
js fiddle pomoże –