javascript - 类似灯箱的叠加效果，可在单击时显示隐藏的 DIV

Question

我在网页上工作，当我浏览网页寻找灵感时，我偶然发现了这个网站，它使用它使用叠加效果来显示和隐藏 DIV 点击，我喜欢在我的网站上也使用这种效果。 任何想法如何做将不胜感激。

此链接会将您带到相关网站。 The site i came across.

Answer 1

你可以这样做:

在 HTML 代码中:

<div class="overlay">

    [whatever you want to display in the overlay DIV]

</div>

在 CSS 代码中:

div.overlay {
    width: 650px;
    height: 400px;
    position: fixed;
    left: calc(50% - 340px);
    top: calc(50% - 230px);
    -moz-border-radius: 15px;
    border-radius: 15px;
    z-index: 999;
    -webkit-transition: opacity 1.5s;
    transition: opacity 1.5s;
    opacity: 0;
}

所有其他设计内容(例如字体系列、颜色等)也包含在内。

代码说明
宽度:650px - 盒子宽度
height: 400px - 盒子的高度
position: fixed - 它不滚动
左:calc(50% - 340px) - 它位于中间
top: calc(50% - 230px) - 它位于中间
border-radius: 15px - 使其成为圆 Angular 矩形 z-index:999 - 每次都在顶部(确保其他人的 z-index 较低)。
transition: opacity 1.5s - 让它淡入
不透明度:0 - 使其不可见

所以，现在盒子是完全不可见的。您可以使用 javascript 使其可见:

function open() {
    document.getElementById("overlay").style.visibility = "visible";
    document.getElementById("overlay").style.opacity = 1;
}
function close() {
    document.getElementById("overlay").style.opacity = 1;
    document.getElementById("overlay").style.visibility = "visible";
}

最后一步是调用 HTML 中的函数:

<a href="#" onClick="open()">Open</a>

并在您的 Box 中关闭一个链接:

<a href="#" onClick="close()">Close</a>

另一种可能的方式，在我看来是用户友好的方式，是制作另一个具有类(class)背景的方式。那得到 onClick="close"。代码可能如下所示:

HTML

<div class="background" onClick="close()"></div>

CSS

div.dark {
    position:fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    opacity: 0;
}

然后您必须在 open() 函数中添加以下内容:

document.getElementById("background").style.visibility = "visible";
document.getElementById("background").style.opacity = 1;

在 close() 函数中:

document.getElementById("background").style.opacity = 0;
document.getElementById("background").style.visibility = "hidden";

如果您这样做，当访问者点击页面上的任何地方时，除了叠加层，它会淡出。当覆盖打开时，背景也会使页面变暗一些，因此访问者会专注于覆盖框。如果你不想让页面变暗，改变

background-color: rgba(0, 0, 0, 0.5);

到

background-color: rgba(0, 0, 0, 0);

祝您的网页好运，希望我能帮到您!