Need Overlay to open over Div using jQuery

I would like to be able to click a link within a div to generate an overlay that is s开发者_如何学Goituated 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! Upvote if this helped you!

---

This should work:

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