Нужно Overlay, чтобы открыть поверх Div с помощью jQuery

Question

Я хотел бы иметь возможность щелкнуть ссылку внутри элемента div, чтобы сгенерировать наложение, которое расположено поверх этого элемента, с помощью jQuery. Увидел несколько похожих вопросов, но все равно оказался потерянным. Хотел сделать это без jQuery UI.

Вот базовый пример кода (за исключением jquery, необходимого для его работы):

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

Заранее спасибо! Upvote, если это помогло вам!

Answer 1

Это должно работать:

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