1. 首页
  2. IT资讯

CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。

需求提要

我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:

  1. 弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击、focus等。
  2. 为了更好突出弹出框的效果,除了弹出框以外的部分,我们可以加上一个幕布(英文为backdrop)效果,让背景的元素模糊、半透明、变暗等等,让用户的注意力能够完全集中在弹出框之中。

弹出前
before

弹出后
modal


需求分析

  1. 把弹出框设定到当前页面的最顶端很简单,我们很快就能想到用Z-index去实现,把Z-index设定到一个足够大的值(取决于你的项目中Z-index数值的基本设计),确保它最大即可。
  2. 要让别的元素无法点击,这个我们在弹出框元素上做文章,好像无法非常简便地实现。要实现这个特征,我们需要和需求提要2一起思考。
  3. 既然我们不仅要让别的元素无法点击,还要让弹出框的背景有幕布效果,那我们可以除了弹出框以外,再加一个元素,让这个元素的长、宽和视窗大小一致(即盖住整个屏幕)并且确保它的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-filtersaturate(180%) blur(1px);

例图:注意导航栏的半透明、模糊效果

在这里插入图片描述

backdrop-filter主要是控制被元素覆盖住的元素的效果,注意,要看到这个样式带来的效果,覆盖的元素必须有一定的半透明度(这样才能看到下面一层的效果)。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203522.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code