Jquery 按一下按钮即可将DIV（覆盖）滑出？

我试图在我的网站上创建一个“覆盖”效果，其中包含一些信息

我一直在努力寻找与这个主题相关的信息，但还没有找到任何运气

我基本上是在寻找这样的东西：

我已经胡闹了一段时间，但当我尝试将它应用到我的网站上时，它的伸缩性非常糟糕，而且通常效果不太好

---

有谁知道更好的解决方案吗？

这会让你走上正轨

index.html

<div id="your_website">
    <button>Open overlay</button>
</div>
<div id="overlay">
    <p>Add anything here</p>
    <button>Close overlay</button>
</div>

Javascript:

$("#your_website button").click(function() {
    $("#overlay").addClass("active");
});

$("#overlay button").click(function() {
    $("#overlay").removeClass("active");
});

---

请注意，您需要jQuery来实现这一点。基本上，您创建一个隐藏元素，然后使其处于“活动”状态，并将其置于其他所有元素之上。别忘了添加一个按钮来关闭它。

我已经有了一些工作，但它只是一个可怕的混乱与网站的规模。我马上就要试试这个，让你知道它是怎么回事！我没有注意到您需要滑动覆盖层。看看这把小提琴：我不太确定我是否理解正确，但是你想让它的覆盖像箭头一样吗？NP，我们总是过度思考生活中简单的事情；）它现在可以工作了，但正如你在图片中看到的，它需要滑出比屏幕长度（点离开屏幕）多一点，就像我现在看到的那样；这会切断svg背面的一部分，这样您知道这个问题的解决方案吗。。。。非挥发性物质！我现在也明白了！非常感谢。

$("#your_website button").click(function() {
    $("#overlay").addClass("active");
});

$("#overlay button").click(function() {
    $("#overlay").removeClass("active");
});