[Front-end]-full screen mask, front-end full screen mask

[Front-end]-full screen mask, front-end full screen mask

In front-end development, the display of a pop-up layer is usually accompanied by the display of a mask layer.

1 <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 
The above code is a simple DEMO code for the mask layer.
When the page does not have a scroll bar, the requirements can be met. However, when the page has a scroll bar, you will find that the above processing method does not meet the full screen mask.
The following uses javascript to implement the full screen mask when the page contains a scroll bar.
Here we will use two methods in the previous article: scrollWidth and scrollHeight. The processing method is as follows:
1 var floatBg = document.getElementById("float-bg");2 floatBg.style.width= document.body.scrollWidth + "px";
  floatBg.style.height = document.body.scrollHeight + "px"; 
In this way, the full screen mask can be implemented regardless of whether the page contains a scroll bar.