Home > Developer > JavaScript
Since I have seen a lot of people in the past, this kind of imitation XP is not very realistic, and I have come up with an idea in the past few days.
... Hey, it's funny.
Can you see it ~~ It should be okay ~~ HOHO ..
The general idea is that, no matter how long the entire document is, the scroll bar of the body disappears and the mask layer overwrites the visible area of the entire form!
The word "visible" is very important !!
Only the approximate effect is achieved. It is not very beautifying... haha. The remaining timeout makes the mask gradient. What should I do when I use it?
Below is the code
If it is good, add a score to bamboo. Hey, tks.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> <style> body {margin: 0; padding: 0 ;}# topFill {display: none; text-align: center; position: absolute; z-index = 999; filter: alpha (opacity = 50); backgro Und-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; backgroun D: # FFFF99; border: 1px solid # fff; height: 20px; line-height: 20px ;}</style> </pead> <body onload = "oload () "onresize =" oresize () "> warning! Are you sure you want to exit? <Input type = "button" value = "yes (Y)" onclick = "isno ('yes ') "/> <input type =" button "value =" no (N) "onclick =" isno ('no ') "/> <input type =" text "id =" textaaa "/> <input type =" button "value =" "onclick =" cl () "/> hehehe Addo judicial <p> hehe Addo judicial </p> hehe Addo judicial haha, Alibaba Cloud justice, and Alibaba Cloud justice </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The page contains a total of three button onclick events and one body onresize event.
When you click the "Click me" button,. js will execute the cl function.
Copy codeThe Code is as follows:
Function cl (){
Document. body. style. overflow = 'ddd ';
Document. body. style. height = document.doc umentElement. clientHeight + 'px ';
Obj. style. display = 'block ';
Obj. style. height = document.doc umentElement. clientHeight + 'px ';
}
The meaning of this function is
I changed the overflow attribute of the label "body" to "hidden", which is to hide the content beyond the height of the body ......
The meaning of the next line is obvious enough. Let the body Height = the height of the current form ~~ In this case, because the body's overflow = 'den den '... so I will give the body a high degree of the current form, then the scroll bar will not disappear ?? Hey, hey... this creates conditions for my next conspiracy .~~~
Obj. style. display = 'block'; this statement is used to display the mask layer ~~ Then a height is given to the mask layer, which is the height of the form ~~ In this case,... HOHO .......
This allows all the content of the document to be covered under the mask layer ..~~~
Then, in onresize (the event triggered when the form size changes) of the body, a function is used to determine whether the current mask layer is displayed .. if it is displayed, the size of the mask layer is equal to the size of the current form. otherwise, nothing will be executed... HOHO
It should be clear here.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
