jQuery - Come si inserisce un DIV su sovrapposizione?

Question

Sto provando a creare una finestra di dialogo modale nella quantità minima di codice jQuery possibile perché il mio progetto ha già un po 'troppo jQuery caricato in esso.

Così, ho bisogno di una sovrapposizione, che si ottiene con:

$('body').wrapInner('<div />') 
.css('opacity','0.5') 
.css('z-index','2') 
.attr('id','dim1'); 

Ignorare per ora che ho un altro di routine per uccidere gli eventi click su # DIM1 mentre questo modale è presente. Così, ora ho bisogno di attirare la mia finestra di dialogo modale in cima:

$('body').append('<div id="test">My Test</div>'); 
$('#test') 
.css('opacity','1.0') 
.css('position','fixed') 
.css('color','#000') 
.css('z-index','2000') 
.css('height','300px') 
.css('width','300px') 
.css('top','50%') 
.css('left','50%'); 

Tuttavia, quando faccio questo, finisco con un grigio fuori #test, quando io non voglio che debba indebolirsi - solo le cose dietro di esso. Qual è il trucco?

Answer 1

Vedere questo rapido demo qui, la chiave sta nel fatto che il modale è assoluto sulla parte superiore dello sfondo opaco. La demo aggiunge dinamicmente il div overlay di sfondo e il div modale al corpo, ma è possibile definirli nell'html e mostrarli.

Concordato che non è necessario utilizzare un plug-in per un effetto modale, la maggior parte dei plug-in è dotata di un sacco di opzioni da cui il bloat che non vuoi se hai solo bisogno degli effetti più semplici. - Nota possiamo farlo in due righe anziché in 3 - e senza un plugin !!

Inoltre, è molto più semplice definire le classi CSS e aggiungerle piuttosto che aggiungere stili in linea a un elemento in script. Più semplice da mantenere.

Answer 2

Penso che la soluzione migliore potrebbe essere utilizzare un plug-in jQuery. Una rapida ricerca su google ha gettato questo: http://www.ericmmartin.com/simplemodal/ che sta facendo quello che ti serve in tre righe!

Se volete un po 'di più, ci sono un sacco sul jquery overlays plugin page

Dallo sguardo di esso, il CSS è la chiave per ottenere le cose a posto, e la maggior parte di questi esempi dovrebbero venire con demo CSS per di adattare .

Ovviamente questo introduce più codice jquery esterno di cui si è preoccupati - ma suggerirei che un plug-in ben scritto e stabile potrebbe far risparmiare parecchio lavoro/tempo/linee di codice!