Effect:When a user in a Windows system shuts down, the interface only allows the user to choose to shut down, cancel, or cancel the action.ProgramAnd the screen is gray. Windows Shutdown effect 22.1 is shown.
Benefits of using this function on webpages:What are the benefits of using this shutdown function on the webpage? First, you can click a link to hide unavailable operations in the background, place available operations at the top of the screen, and highlight them to avoid misoperation. Second, highlight the information and remind users of the precautions.
Principle:The principle of implementing this effect on Web pages is simple. Create two layers. One is the covering layer, which overwrites the entire page and is displayed in gray. The other layer is used as the highlighted part above the covering layer, this can be set by setting the Z-index attribute of the layer. After the shutdown is canceled, delete the two layers on the page.
Code:
<HTML>
<Head>
<Title> Ajax shutdown effect </title>
<Style type = "text/CSS">
# Lightbox {/* This layer is the highlighted Layer */
Border-Right: # fff 1px solid;
Border-top: # fff 1px solid;
Display: block;
Z-INDEX: 9999;/* set this layer at the top of the page, set large enough */
Background: # fdfce9;/* set the background color */
Left: 50%;
Margin:-220px 0px 0px-250px;
Border-left: # fff 1px solid;
Width: 500px;
Border-bottom: # fff 1px solid;
Position: absolute;
Top: 50%;
Height: 400px;
Text-align: left
}
# Overlay {/* This layer is covered */
Display: block;
Z-INDEX: 9998;/* set the bottom of the highlighted Layer */
Filter: alpha (opacity = 20);/* set to transparent */
Left: 0px;
Width: 100%;
Position: absolute;
Top: 0px;
Height: 100%;
Background-color: #000;
Moz-opacity: 0.8;
Opacity:. 80
}
</Style>
</Head>
<Body>
<A href = "http://www.baidu.com" target = "_ blank"> Baidu </a>
<! -- This layer is a cover layer -->
<Div id = "overlay"> </div>
<! -- This layer is a highlighted layer -->
<Div id = "lightbox"> <a href = "#" onclick = "javascript: F ()"> close </a> & nbsp; <a href = "#" onclick = "javascript: F1 ()"> open </a> </div>
</Body>
</Html>
<SCRIPT>
Function f ()
{
Document. getelementbyid ("overlay"). style. Display = "NONE ";
}
Function F1 ()
{
Document. getelementbyid ("overlay"). style. Display = "Block ";
}
</SCRIPT>
Note: If the flag exists in IE, the flag cannot be overwritten, but can be overwritten in other browsers. Figure 22.3 shows the effect of the mark in IE, and figure 22.4 shows the effect of the mark in mozzila Firefox. figure 22.3 MARK
figure 22.4 mozzila firefox MARK so when using IE, you must first hide the element in the webpage. Use the following code to hide all elements on the page. selects = document. getelementsbytagname ('select'); for (I = 0; I selects [I]. style. visibility = visibility; }
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
