Html/css enable shadow masks to overwrite the original Web page and display the floating box function

In the provision of user-modified data/password and other functions, often want to give users such experience, do not jump, do not frame the case to complete the operation of these functions.

This can be achieved by an effect that shadows the entire current page under the same page and makes the elements in the original page unusable, while allowing a specific modification box to be used to float above the shadow

As an example of the following effect:

The idea is to set a div as the immediate child element of the body element, so that its width and height are all 100%, and then let it be hidden at the beginning, while the Middle Modifier box page is also hidden at the beginning.

In addition, both use absolute positioning position:absolute, so that it is out of the HTML document flow and does not affect the positioning of other subsequent elements.

Then add the JS function with the button binding to control their display and hide (Modify the Display property). As for why the elements of the original page are not used, because they are all the width and height of the 100% div is covered. The way the lid is obtained by adjusting the Z-index property, of course, the value of the change box floating above is larger.

The specific sample code is as follows

can refer to http://www.csharpwin.com/dotnetspace/2415.shtml

Html/css enable shadow masks to overwrite the original Web page and display the floating box function