Estou tentando criar uma caixa de diálogo modal com a menor quantidade possível de código jQuery, porque meu projeto já tem jQuery carregado demais.

Então, primeiro precisei de uma sobreposição, que é obtida com:

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

Ignore por enquanto que eu tenho outra rotina para eliminar os eventos de clique em # dim1 enquanto este modal estiver presente. Então, agora eu preciso desenhar 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 faço isso, acabo com um teste esmaecido, quando não quero que ele fique esmaecido - apenas as coisas por trás dele. Qual é o truque?