CODEWITHSUNDEEP
jqueryoverlay
chainwork
chainwork

Reputation: 2886

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 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>

Upvotes: 4

Views: 12390

Answers (1)

Fyodor Soikin
Fyodor Soikin

Reputation: 80744

This should work:

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

Upvotes: 12

Related Questions