jQuery - Como faço para colocar um DIV Em Overlay?

Question

Eu estou tentando fazer um diálogo modal no menor quantidade de código jQuery possível porque o meu projeto já tem um pouco demais jQuery carregado nele.

Então, primeiro eu precisava de uma sobreposição, o que é conseguido com:

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

O desrespeito por agora que eu tenho uma outra rotina para matar os eventos de clique em # dim1 enquanto este modal está presente. Então, agora eu preciso para chamar a minha caixa de diálogo modal no topo:

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

No entanto, quando eu faço isso, eu acabar com um esmaecido fora #test, quando eu não quero isso para ser esmaecido - apenas o material por trás dele. Qual é o truque?

Answer 1

Veja este rápida demonstração aqui, a chave está ao modal sendo absoluto sobre a parte superior do fundo opaco . A demo adiciona dinamicamente o div sobreposição de fundo eo div modal para o corpo, mas você poderia defini-los no html e apenas mostrá-los.

Acordado, não há necessidade de usar um plug-in para um efeito modal, a maioria dos plugins vem com muitas opções, portanto, o inchaço que você não quer se você só precisa o mais simples dos efeitos. - Nota podemos fazer isso em duas linhas, em vez de 3 - e sem um plug-in !!

Também é muito mais fácil para definir classes css e adicioná-los em vez de estilos inline adicionar a um elemento no script. Mais fácil de manter.

Answer 2

Eu acho que a melhor solução seria usar um plugin jQuery. Uma rápida pesquisa no google vomitou este: http://www.ericmmartin.com/simplemodal/ que está fazendo o que você precisa em três linhas!

Se você quiser algo mais, há cargas no jquery sobreposições plug-in página

A partir do olhar dela, o CSS é a chave para conseguir as coisas direito, ea maioria destes exemplos devem vir com demonstração CSS para você se adaptar.

Obviamente, isso traz em código jquery mais externo que você está preocupado - mas gostaria de sugerir um bem escrito e estável plug-in lhe poupar lotes de trabalho / tempo / linhas de código