title: jQuery - How Do I Place a DIV On Overlay?
body: <p>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.</p>
  
  <p>So, I first needed an overlay, which is achieved with:</p>
  
  <pre><code>$('body').wrapInner('&lt;div /&gt;')
  .css('opacity','0.5')
  .css('z-index','2')
  .attr('id','dim1');
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$('body').append('&lt;div id="test"&gt;My Test&lt;/div&gt;');
  $('#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%');
  </code></pre>
  
  <p>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?</p>