Interesting idea~~JS imitation WINXP logout desktop fade effect_javascript skills

Since I have seen many people’s fake XP fade effects in the past, they are not very realistic. I accidentally thought of an idea in the past few days

... Hehe... it’s very interesting

Look at everyone Can you understand it~~ It should be ok~~HOHO..

The idea can be summarized in one sentence... No matter how long the entire document is, let the scroll bar of the body disappear and let the mask layer cover the entire form. Visible area!

The word 'visible' is very important!!



Only to roughly create the effect... without beautifying it... haha. The rest. The timeout allows the mask gradient to be added when needed.

The following is the code

If it is good, please give me some extra points. Hehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehe does not have any problem

Untitled Document<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style> body{margin:0;padding:0;} #topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;} #alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666} #alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D} #alertContent{padding:42px 0;;text-align:center;} #alertBtn{text-align:center;} #alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;} </style> <div id="topFill"> <div id="alertBox">Warning!<div id="alertTitle"> </div>Are you sure you want to quit?<div id="alertContent"> </div> <div id="alertBtn"><input type="button" value=""></div> </div> </div>