Questo è quello che uso io stesso; sembra bello, il codice è semplice e facile da capire e utilizza CSS e jQuery minimi.
Ecco il codice (e un violino per vederlo in azione: http://jsfiddle.net/cadkJ/125/):
HTML
<h1>Bacon ipsum dolor sit amet</h1>
<p>Magna adipisicing eu, pig ex pariatur non biltong nisi consequat do exercitation. Biltong exercitation consequat aute. Excepteur velit ribeye, et salami pariatur sed consequat enim ham. Tenderloin consequat et, in pastrami aute meatloaf beef spare ribs tri-tip beef ribs sed ut jerky strip steak. Fugiat turkey shank frankfurter pork loin pastrami.</p>
<button id="modal-launcher">Launch Modal Window</button>
<div id="modal-background"></div>
<div id="modal-content">
<button id="modal-close">Close Modal Window</button>
</div>
CSS
#modal-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: .50;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
z-index: 1000;
}
#modal-content {
background-color: white;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: none;
height: 240px;
left: 50%;
margin: -120px 0 0 -160px;
padding: 10px;
position: fixed;
top: 50%;
width: 320px;
z-index: 1000;
}
#modal-background.active, #modal-content.active {
display: block;
}
jQuery
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function() {
$("#modal-content, #modal-background").toggleClass("active");
});
});
Vuoi bloccare lo scorrimento?
Aggiungere la seguente regola CSS:
body.active { position: fixed; overflow: hidden; }
Sostituire la funzione jQuery con: (body aggiunti alla linea 3)
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function() {
$("body, #modal-content, #modal-background").toggleClass("active");
});
});
Vuoi per prevenire eventi click sullo sfondo da chiudendo il modale?
Sostituire la funzione jQuery con: (#modal-background rimosso dalla linea 2)
$(function(){
$("#modal-launcher, #modal-close").click(function() {
$("#modal-content, #modal-background").toggleClass("active");
});
});
se questo funziona, questo è fondamentalmente quello che avevo bisogno di aiuto è la parte css – JasonDavis
Non ho testet, ma come detto, non dovrebbe essere così difficile da fare. La parte più importante è che non si annida il div in div con l'opacità, perché il contenuto diventerà anche trasparente. Puoi usare un PNG trasparente, se preferisci. –
Penso che creare la tua versione potrebbe essere una buona idea. Lavorerò per i primi 2-3 compiti che vuoi completare. Ma più tardi, è necessario che sia più complesso. La mia esperienza mi dice che finirà per essere più disordinato e finire per essere più grande, rispetto ad alcuni degli altri plugin là fuori. Ce ne sono tantissimi :-) – Kordonme