jQuery - ¿Cómo puedo colocar un DIV en superposición?

Question

Estoy tratando de hacer un cuadro de diálogo modal en la menor cantidad de código de jQuery como sea posible porque mi proyecto ya tiene un poco demasiado jQuery cargado en él.

Por lo tanto, lo primero que necesitaba una superposición, que se consigue con:

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

Indiferencia por ahora que tengo otra rutina para matar a los eventos de clic en # dim1 mientras este modal está presente. Por lo tanto, ahora tengo que sacar mi diálogo modal en la parte superior:

$('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%');

Sin embargo, cuando hago esto, termino con un atenuado a cabo #test, cuando no quiero que eso se atenuada - sólo las cosas detrás de él. ¿Cuál es el truco?

Answer 1

href="http://pastebin.me/494ce61eb12fa" rel="nofollow demostración aquí, la clave está en la modal siendo absoluto sobre la parte superior del fondo opaco . La demo agrega dinámicamente el div fondo de la superposición y el div modal para el cuerpo, pero se podía definir estos en el html y simplemente mostrarlos.

acordó que no hay necesidad de utilizar un plug-in para un efecto modal, la mayoría de los plugins vienen con un montón de opciones, por lo tanto, que los excesos que no desea si sólo se necesita el más simple de los efectos. - Tenga en cuenta que podemos hacerlo de dos líneas en lugar de 3 - y sin un plugin !!

También es mucho más fácil de definir clases CSS y añadir éstas en lugar de añadir los estilos en línea a un elemento de guión. Más fácil de mantener.

Answer 2

Creo que la mejor solución podría ser utilizar un plugin de jQuery. Una rápida búsqueda en Google vomitó esto: http://www.ericmmartin.com/simplemodal/ cuales está haciendo lo que necesita en tres líneas!

Si quieres algo más, hay cargas en el jQuery superposiciones página del plugin

Desde el aspecto de la misma, la CSS es la clave para hacer las cosas bien, y la mayoría de estos ejemplos deben venir con CSS de demostración para que pueda adaptarse.

Obviamente esto trae en más código jQuery externo que usted está preocupado - pero sugeriría un bien escrito y el plugin estable que podría ahorrar una gran cantidad de trabajo / tiempo / líneas de código