共计 2627 个字符,预计需要花费 7 分钟才能阅读完成。
需要提要
咱们如果想写一个成果相似弹出框的组件,首先简略剖析一下弹出框的几个个性:
- 弹出框必定位于以后页面的最顶端,并且在弹出框敞开之前,其余控件都无奈点击、focus 等。
- 为了更好突出弹出框的成果,除了弹出框以外的局部,咱们能够加上一个幕布(英文为 backdrop)成果,让背景的元素含糊、半透明、变暗等等,让用户的注意力可能齐全集中在弹出框之中。
弹出前:
弹出后:
需要剖析
- 把弹出框设定到以后页面的最顶端很简略,咱们很快就能想到用 Z -index 去实现,把 Z -index 设定到一个足够大的值(取决于你的我的项目中 Z -index 数值的根本设计),确保它最大即可。
- 要让别的元素无奈点击,这个咱们在弹出框元素上做文章,如同无奈十分简便地实现。要实现这个特色,咱们须要和需要提要 2 一起思考。
- 既然咱们不仅要让别的元素无奈点击,还要让弹出框的背景有幕布成果,那咱们能够除了弹出框以外,再加一个元素,让这个元素的长、宽和视窗大小统一(即盖住整个屏幕)并且确保它的 Z -index 也足够大,然而又刚好比弹出框的 Z -index 小一点。这样咱们就失去了两个元素——一个是咱们的弹出框,另一个是咱们的幕布区域(整个屏幕除了弹出框的区域),这样在做款式设计的时候也比拟简单明了。
代码实现
思路清晰之后,剩下的就是简略的代码实现了,所有成果都很简略,只有依据咱们下面剖析的设计来写就 OK 了。
HTML
<main>
<div class="modal"><button id="close">close</button></div>
<div class="backdrop"></div>
<button class="backcontent">show</button>
</main>
JS
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function() {
// show the modal
var ele = document.getElementsByClassName("modal")[0];
ele.style.visibility = `visible`;
ele.style.opacity = `1`;
// show backdrop effect
var backdrop = document.getElementsByClassName("backdrop")[0];
backdrop.style.opacity=`1`;
backdrop.style.visibility=`visible`;
})
var close = document.getElementById('close').addEventListener("click", function(event) {
// close modal
event.target.parentNode.style.visibility=`hidden`;
event.target.parentNode.style.opacity = `0`;
// close backdrop effect
var backdrop = document.getElementsByClassName("backdrop")[0];
backdrop.style.opacity=`0`;
backdrop.style.visibility=`hidden`;
})
咱们的幕布成果最重要的是在 CSS 外面的设定,大家能够略微认真看一下。
CSS
body {background-color: #f4ebc1;}
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.backdrop{
width:100%;
height:100%;
visibility: hidden;
opacity: 0;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background: rgba(8, 7, 7, 0.6);
z-index: 100;
transition: all .2s ease;
backdrop-filter: saturate(180%) blur(1px);
}
.backcontent{
position: absolute;
top: 70vh;
width: 80px;
height: 30px;
background: white;
text-align: center;
line-height: 28px;
border: 1px solid black;
box-shadow: 0 0 3px #0070D2;
border-radius: 30px;
opacity:.85;
outline: none;
}
.modal {
position: absolute;
left: 50xw;
top: 30vh;
width: 300px;
height: 150px;
visibility: hidden;
opacity: 0;
background-color: white;
border-radius: 5px;
border: 1px solid black;
transition: all .2s ease;
display: flex;
justify-content: center;
align-items: flex-end;
z-index: 9001;
}
#close {
width: 80px;
height: 30px;
background: white;
text-align: center;
line-height: 28px;
border: 1px solid black;
box-shadow: 0 0 3px #0070D2;
border-radius: 30px;
opacity:.85;
outline: none;
margin-bottom: 1rem;
}
苹果官网导航栏成果
苹果官网的导航栏的半透明成果,次要是由上面这行款式实现的。
backdrop-filter: saturate(180%) blur(1px);
例图:留神导航栏的半透明、含糊成果
backdrop-filter
次要是管制被元素覆盖住的元素的成果,留神,要看到这个款式带来的成果,笼罩的元素必须有肯定的半透明度(这样能力看到上面一层的成果)。
供参考:
- 无关
backdrop-filter
的 MDN 文档 - Codepen 上这个 Demo 的代码与成果
正文完
发表至: javascript
2020-09-23