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 - 盒子宽度
高度：400px - 箱子高度
position：fixed - 它不滚动
left：calc（50％ - 340px） - 它位于中间
top：calc（50％ - 230px） - 它位于中间
border-radius：15px - 圆角直角 z-index：999 - 每次都在顶部（确保其他人的z索引较低）过渡：不透明度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>

另一种可能的方式，在我看来，用户更友好的方式是使用类背景制作另一种方式。这得到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);

祝你的网页好运，我希望我能帮到你！

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

1 个答案: