Question

我正在尝试创建一个＆＃34; overlay＆＃34;影响我的网站上的一些信息。

我一直试图找到有关这个主题的信息，但还没有运气。

我基本上正在寻找的是这样做：

http://imgur.com/MWM1V8w,69OTrAe#0

我一直在搞乱，但是当我尝试将它应用到我的网站时，它会出现可怕的扩展并且通常不能很好地工作。

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

Answer 1

这可以让你走上正轨。

的index.html

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

的CSS：

#your_website {
    width: 100%;
    height: 500px;
    background: green;
}

#overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: lightgray;
    width: 100%;
    height: 100%;
}

#overlay.active {
    display: block;
}

使用Javascript：

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

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

请注意，您需要jQuery。基本上你创建一个隐藏的元素，然后你使它活跃＆＃39;并且位于其他一切之上。不要忘记添加一个按钮来关闭它。

DIV（叠加）在点击时滑出？

1 个答案: