乐趣区

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

jiezi

需要提要

咱们如果想写一个成果相似弹出框的组件，首先简略剖析一下弹出框的几个个性：

  1. 弹出框必定位于以后页面的最顶端，并且在弹出框敞开之前，其余控件都无奈点击、focus 等。
  2. 为了更好突出弹出框的成果，除了弹出框以外的局部，咱们能够加上一个幕布（英文为 backdrop）成果，让背景的元素含糊、半透明、变暗等等，让用户的注意力可能齐全集中在弹出框之中。

弹出前：

弹出后：

需要剖析

  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-filter: saturate(180%) blur(1px);

例图：留神导航栏的半透明、含糊成果

backdrop-filter次要是管制被元素覆盖住的元素的成果，留神，要看到这个款式带来的成果，笼罩的元素必须有肯定的半透明度（这样能力看到上面一层的成果）。

供参考：

  • 无关 backdrop-filter 的 MDN 文档
  • Codepen 上这个 Demo 的代码与成果
退出移动版