Need Overlay to open over Div using jQuery

Question

I would like to be able to click a link within a div to generate an overlay that is situated over that very same div using jQuery. Saw some similar questions but still found myself lost. Wanted to do this without jQuery UI.

Here is a basic code example (minus jquery needed to make it actually work):

<style>
div {padding:5px;}
#box {width:200px;height:200px; border:1px solid;}
#box-overlay {width:200px;height:200px; border:1px solid #ff0000; background-color:#CCCCCC;}
</style>

<div class="box">
  <p>Content that appears when page loads.</p>
  <a href="#" id="new-content">Opens Overlay</a>
</div>


<br /><br />

<div class="box-overlay">
 <p>Overlay that appears on click. Should be hidden onload.</p>
 <button>Submit</button>&nbsp;<button>Close Overlay</button>
</div>

Thanks in advance!

Answer 1

This should work:

$("#new-content").click( function() {
    var position = $(".box").offset();
    $(".box-overlay").css( { position: "absolute", left: position.left, top: position.top } );
} );