I'm trying to make a modal dialog in the least amount of jQuery code as possible because my project already has a bit too much jQuery loaded into it.
So, I first needed an overlay, which is achieved with:
$('body').wrapInner('<div />') .css('opacity','0.5') .css('z-index','2') .attr('id','dim1');
Disregard for now that I have another routine to kill the click events on #dim1 while this modal is present. So, now I need to draw my modal dialog on top:
$('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%');
However, when I do this, I end up with a dimmed out #test, when I don't want that to be dimmed — just the stuff behind it. What's the trick?