Question

我希望能够单击div中的链接以使用jQuery生成位于该相同div上的叠加层。看到一些类似的问题，但仍然发现自己迷路了。想要在没有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>

提前致谢！如果这对你有所帮助，请给予支持！

Answer 1

这应该有效：

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

需要使用jQuery在Over上打开Div

1 个答案: