Ich habe eins in der art aber nutze es anderst.
Das wäre mein CSS (nur als Beispiel):
HTML Code:
#display {
position:fixed;
z-index:2;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.6);
display:none;
}
.popup {
position:fixed;
z-index:3;
top:50%;
left:50%;
width:400px;
background:#141212;
border-radius:3px;
box-shadow:0 0 4px #000, 0 0 10px #000, inset 0 0 1px #222;
margin-top: -100px;
margin-left: -220px;
z-index:999;;
padding:3px;
font-family:Arial, Helvetica, sans-serif;
color:#42403d;
display:none;
}
.popup h2 {
background:#141212;
background: -moz-linear-gradient(top, rgba(255,255,255,.04) 0%, rgba(0,0,0,.04) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.04)), color-stop(100%,rgba(0,0,0,.04)));
background: -webkit-linear-gradient(top, rgba(255,255,255,.04) 0%,rgba(0,0,0,.04) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,.04) 0%,#rgba(0,0,0,.04) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,.04) 0%,#rgba(0,0,0,.04) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,.04) 0%,#rgba(0,0,0,.04) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,.02)', endColorstr='rgba(0,0,0,.04)',GradientType=0 );
border-radius:3px;
box-shadow:0 0 4px #000, inset 0 0 1px #252525;
display:block;
font-weight:bold;
padding:8px;
font-size:16px;
text-decoration:uppercase;
text-shadow:0 0 4px #050505;
}
.popup-wrapper {
padding:15px 10px 10px 10px;
font-size: 12px;
text-shadow:0 0 4px #050505;
}
Hier wäre dan das HTML dazu (iwo in der seite einbinden):
HTML Code:
<div id="display"></div>
<div class="popup">
<div class="popup-wrapper">
Text blabla
</div>
</div>
sooo und zu guterletzt das Javascript basierend auf jQuery
Da öffnet sich nur das Popup wen man was anklickt:
PHP Code:
$('.open-popup').live('click', function() {
$('#display').fadeIn(500);
$('.popup').delay(300).fadeIn(500);
});
$('#display, .destroy-popup').live('click', function() {
$('.popup').fadeOut(500);
$('#display').delay(300).fadeOut(500);
});