CSS simply realizes the background screen of pop-up box and input box, and imitates the translucent effect of navigation block on Apple official website.

Time:2020-11-13

Requirements summary

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

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

Before ejecting
CSS simply realizes the background screen of pop-up box and input box, and imitates the translucent effect of navigation block on Apple official website.

After ejecting
CSS simply realizes the background screen of pop-up box and input box, and imitates the translucent effect of navigation block on Apple official website.


requirement analysis

  1. Setting the pop-up box to the top of the current page is very simple. We can quickly think of using Z-index to achieve it. Set the Z-index to a value large enough (depending on the basic design of Z-index value in your project) to ensure its maximum.
  2. To make other elements unable to click, we do articles on pop-up elements, which seems to be unable to be implemented very easily. To implement this feature, we need to think in conjunction with requirements feed 2.
  3. Since we not only want to 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, so that the length and width of this element are consistent with the size of the window (that is, covering the whole screen), and make sure that its Z-index is large enough, but it is just as small as the Z-index of the pop-up box. In this way, we get two elements – one is our pop-up box, and the other is our screen area (except for the pop-up box area of the whole screen), which makes the style design more simple and clear.

code implementation

After the idea is clear, the rest is simple code implementation, all the effects are very simple, as long as according to the design we analyzed above to write 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`;
})

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

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: pay attention to the translucent and fuzzy effect of the navigation bar

CSS simply realizes the background screen of pop-up box and input box, and imitates the translucent effect of navigation block on Apple official website.

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

For reference:

  • ofbackdrop-filterMDN document for
  • Code and effect of demo on codepen