JS CSS method to achieve pop-up full-screen gray and black transparent mask effect_javascript skills

The example in this article describes the method of using js CSS to pop up a full-screen gray-black transparent mask effect. Share it with everyone for your reference. The specific analysis is as follows:

This effect is found on many websites. After a certain operation is performed, a gray-black translucent mask will pop up, on which the specified content can be operated, for example, a login box can pop up. , let’s introduce how to achieve this effect. The code example is as follows:

Copy code The code is as follows:

Click to close

Script Home welcomes you, Click to pop up the mask

The above implements the basic mask function. When you click to pop up the mask, an object will pop up. When you click to close it, the mask effect disappears. Here’s how to achieve this effect:

Implementation principle:

Create a full-screen div, use absolute positioning, so that it can be separated from the document flow and will not affect other elements, and set it to a semi-transparent state. Of course, this transparency can be adjusted at will. Create a login element, which also uses absolute positioning, and sets its z-index attribute value to be greater than the div on the screen. At this time, it will not be covered by the full-screen div. By default, the display attribute value of these two divs is none. Their display attribute values ​​can be changed when the corresponding buttons are clicked.

Recommendation:Write code by hand as much as possible, which can effectively improve learning efficiency and depth.

I hope this article will be helpful to everyone’s web programming design.