CSS simply realizes the background curtain of pop-up boxes and input boxes, imitating the translucent effect of the navigation block on Apple’s official website.

Time:2021-8-1

Requirements summary

If we want to write a component with an effect similar to pop-up box, first briefly analyze several characteristics of pop-up box:

  1. The pop-up box must be at the top of the current page, and other controls cannot click, focus, etc. until the pop-up box is closed.
  2. In order to better highlight the effect of the pop-up box, in addition to the pop-up box, we can add a backdrop effect to make the background elements blurred, translucent, dimmed, etc., so that the user’s attention can be fully focused on the pop-up box.

Before ejecting
CSS simply realizes the background curtain of pop-up boxes and input boxes, imitating the translucent effect of the navigation block on Apple's official website.

After pop-up
CSS simply realizes the background curtain of pop-up boxes and input boxes, imitating the translucent effect of the navigation block on Apple's official website.


requirement analysis

  1. Setting the pop-up box to the top of the current page is very simple. We can soon think of using Z-index to realize it. Set the Z-index to a large enough value (depending on the basic design of the Z-index value in your project) to ensure that it is the largest.
  2. To make other elements unable to click, we make an article on the pop-up box element. It seems that it can’t be implemented very easily. To implement this feature, we need to think together with requirement summary 2.
  3. Since we should not only make other elements unable to click, but also make the background of the pop-up box have a curtain effect, we can add an element in addition to the pop-up box to make the length and width of this element consistent with the window size (that is, cover the whole screen) and ensure that its Z-index is also large enough, but just like the Z-index of the pop-up box. In this way, we get two elements – one is our pop-up box, the other is our screen area (except the pop-up box area of the whole screen), which is also relatively simple and clear in style design.

code implementation

After the idea is clear, the rest is simple code implementation. All the effects are very simple. Just write it according to the design analyzed above.

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`;
})

The most important thing about our screen effect is the setting in CSS. You can take a closer look.

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;
}

Apple official website navigation bar effect

The translucent effect of the navigation bar on Apple’s official website is mainly realized by the following line style.

backdrop-filter: saturate(180%) blur(1px);

Example image: pay attention to the translucent and fuzzy effects of the navigation bar

CSS simply realizes the background curtain of pop-up boxes and input boxes, imitating the translucent effect of the navigation block on Apple's official website.

backdrop-filterIt mainly controls the effect of elements covered by elements. Note that to see the effect brought by this style, the covered elements must have a certain semi transparency (so as to see the effect of the lower layer).

For reference: