Home > Developer > JavaScript
Windows Shutdown Result Analysis
When a user in Windows shuts down, the displayed interface only allows the user to choose to shut down, unregister or cancel the action, and the programs on the desktop cannot be used, and the screen is dimmed.
In this example, the effect of the highlighted display is achieved on the webpage.
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.
Analysis of shutdown results on the webpage
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.
Run the following code to display the shutdown effect.
<Html>
<Head>
<Title> AJAX LightBox Sample </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 = 80);/* 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>
<! -- This layer is a cover layer -->
<Div id = "overlay"> </div>
<! -- This layer is a highlighted layer -->
<Div id = "lightbox"> </div>
</Body>
</Html>
Note that if the <select> flag exists in IE, the flag cannot be overwritten, but can be overwritten in other browsers.
When using the IE browser, you must first hide the <select> element in the webpage. Use the following code to hide all <select> elements on the page.
Selects = document. getElementsByTagName ('select ');
For (I = 0; I <selects. length; I ++ ){
Selects [I]. style. visibility = visibility;
}
Code Implementation
Client code
There are two links on the client page. After clicking the link, the user sends a request to the server and displays the returned information on the highlighted layer. The webpage file code of the client is as follows:
<Html>
<Head>
<Title> AJAX LightBox </title>
<! -- The css style table file used in this example -->
<LINK href = "lightbox.css" type = text/css rel = stylesheet>
<! -- Prototype file -->
<Script type = "text/javascript" src = "js/prototype. js"> </script>
<! -- The javascript code used in this example -->
<Script type = "text/javascript" src = "lightbox. js"> </script>
</Head>
<Body>
<DIV id = container>
<UL>
<LI> <A class = lbOn href = "getInfo. jsp? Id = one "> One </A>
</LI>
<LI> <A class = lbOn href = "getInfo. jsp? Id = two "> Two </A>
</LI>
</UL>
</Div>
</Body>
</Html>
In addition, you also need to set the CSS style used for the page. The lightbox.css style sheet file code is as follows:
# Lightbox {
BORDER-RIGHT: # fff 1px solid;
BORDER-TOP: # fff 1px solid;
DISPLAY: none;
Z-INDEX: 9999;
BACKGROUND: # fdfce9;
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
}
UNKNOWN {
POSITION: fixed
}
# Overlay {
DISPLAY: none;
Z-INDEX: 5000; FILTER: alpha (opacity = 80 );
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity:. 80
}
UNKNOWN {
POSITION: fixed
}
. Done # lightbox # lbLoadMessage {
DISPLAY: none
}
. Done # lightbox # lbContent {
DISPLAY: block
}
. Loading # lightbox # lbContent {
DISPLAY: none
}
. Loading # lightbox # lbLoadMessage {
DISPLAY: block
}
. Done # lightbox IMG {
WIDTH: 100%; HEIGHT: 100%
}
Client script
Because the browser supports different layers, you must first determine the browser type of the client. Run the following code to determine the browser and operating system of the client.
Var detect = navigator. userAgent. toLowerCase ();
Var OS, browser, version, total, thestring;
Function getBrowserInfo (){
If (checkIt ('konqueror ')){
Browser = "Konqueror ";
OS = "Linux ";
}
Else if (checkIt ('safari ') browser = "safari"
Else if (checkIt ('omniweb') browser = "omniWeb"
Else if (checkIt ('Opera ') browser = "opera"
Else if (checkIt ('webtv') browser = "Webtv ";
Else if (checkIt ('icab') browser = "icab"
Else if (checkIt ('msie ') browser = "Internet Explorer"
Else if (! CheckIt ('compute ')){
Browser = "Netscape Navigator"
Version = detect. charAt (8 );
}
Else browser = "An unknown browser ";
If (! Version) version = detect. charAt (place + thestring. length );
If (! OS ){
If (checkIt ('linux ') OS = "linux ";
Else if (checkIt ('x11') OS = "Unix ";
Else if (checkIt ('mac') OS = "mac"
Else if (checkIt ('win') OS = "Windows"
Else OS = "an unknown operating system ";
}
}
Function checkIt (string ){
Place = detect. indexOf (string) + 1;
Thestring = string;
Return place;
}
Next, let's take a look at the method to add when loading a webpage. The code for webpage loading and Initialization is as follows:
// Call the initialize and getBrowserInfo methods for webpage loading.
Event. observe (window, 'load', initialize, false );
Event. observe (window, 'load', getBrowserInfo, false );
// Clear the cache when it is not loaded
Event. observe (window, 'unload', Event. unloadCache, false );
// Initialization Method
Function initialize (){
// Call this method to add overlay and highlight layers to the page
AddLightboxMarkup ();
// Create a lightbox object for each highlighted Element
Lbox = document. getElementsByClassName ('lbon ');
For (I = 0; I <lbox. length; I ++ ){
Valid = new lightbox (lbox [I]);
}
}
// Use the Dom method to create overlay and highlight Layers
Function addLightboxMarkup (){
Bod = document. getElementsByTagName ('body') [0];
Overlay = document. createElement ('div ');
Overlay. id = 'overlay ';
Lb = document. createElement ('div ');
Lb. id = 'lightbox ';
Lb. className = 'loading ';
Lb. innerHTML = '<div id = "lbLoadMessage">' +
'<P> Loading </p>' +
'</Div> ';
Bod. appendChild (overlay );
Bod. appendChild (lb );
}
Lightbox Encapsulation
When initializing data, a lightbox object is created for each highlighted link. The code implementation of this class is as follows:
Var lightbox = Class. create ();
Lightbox. prototype = {
YPos: 0,
XPos: 0,
// Constructor. ctrl is the element used to create the object.
Initialize: function (ctrl ){
// Assign the link of this element to this. content
This. content = ctrl. href;
// Add the onclick event activate method for this element
Event. observe (ctrl, 'click', this. activate. bindAsEventListener (this), false );
Ctrl. onclick = function () {return false ;};
},
// When you click a link
Activate: function (){
If (browser = 'Internet Explorer ') {// judge as IE browser
This. getScroll ();
This. prepareIE ('20140901', 'hiddy ');
This. setScroll (0, 0 );
This. hideSelects ('den den '); // hide all <select> tags
}
// Call the displayLightbox method in this class
This. displayLightbox ("block ");
},
PrepareIE: function (height, overflow ){
Bod = document. getElementsByTagName ('body') [0];
Bod. style. height = height;
Bod. style. overflow = overflow;
Htm = document. getElementsByTagName ('html ') [0];
Htm. style. height = height;
Htm. style. overflow = overflow;
},
HideSelects: function (visibility ){
Selects = document. getElementsByTagName ('select ');
For (I = 0; I <selects. length; I ++ ){
Selects [I]. style. visibility = visibility;
}
},
GetScroll: function (){
If (self. pageYOffset ){
This. yPos = self. pageYOffset;
} Else if (document.doc umentElement & document.doc umentElement. scrollTop ){
This. yPos = document.doc umentElement. scrollTop;
} Else if (document. body ){
This. yPos = document. body. scrollTop;
}
},
SetScroll: function (x, y ){
Window. scrollTo (x, y );
},
DisplayLightbox: function (display ){
// Display the overwriting Layer
$ ('Overlay '). style. display = display;
// Display the highlighted Layer
$ ('Lightbox'). style. display = display;
// If it is not a hidden state, call the loadInfo method in this class.
If (display! = 'None') this. loadInfo ();
},
// This method sends an Ajax request
LoadInfo: function (){
// Call the processInfo method in this class after the request is complete
Var myAjax = new Ajax. Request (
This. content,
{Method: 'get', parameters: "", onComplete: this. processInfo. bindAsEvent Listener (this )}
);
},
// Display the returned text to the highlighted layer.
ProcessInfo: function (response ){
// Obtain the returned text data
Var result = response. responseText;
// Display to the highlighted Layer
Info = "<div id = 'lbcontent'>" + result + "</div> ";
// Insert an element before the info Element
New Insertion. Before ($ ('lbloadmessage'), info)
// Change the value of the class name of the element
$ ('Lightbox'). className = "done ";
// Call the actions method in this class
This. actions ();
Var ctrl = $ ('lightbox ');
// Add the event processing method reset for the highlight Layer
Event. observe (ctrl, 'click', this. reset. bindAsEventListener (this), false );
Ctrl. onclick = function () {return false ;};
},
// Restore the initial state
Reset: function (){
// Hide the overwriting Layer
$ ('Overlay '). style. display = "none ";
// Clear the returned data
$ ('Lbcontent'). innerHTML = "";
// Hide the highlight Layer
$ ('Lightbox'). style. display = "none ";
},
// Search through new links within the lightbox, and attach click event
Actions: function (){
LbActions = document. getElementsByClassName ('lbaction ');
For (I = 0; I <lbActions. length; I ++ ){
Event. observe (lbActions [I], 'click', this [lbActions [I]. rel]. bindAs EventListener (this), false );
LbActions [I]. onclick = function () {return false ;};
}
}
}
Tip: because the object is complex, you can refer to the comments section of the Code carefully.
Server code
The server first obtains the "id" value in the query. If the value is null or empty, it is set to the default value. Then judge the value and return the corresponding string information. The getInfojsp Page code for processing the request is as follows:
<% @ Page language = "java" import = "java. util. *" %>
<%
// Obtain the id value in the request
String imgID = request. getParameter ("id ");
If (imgID = null | imgID. equals ("") // if it is null or empty
ImgID = "one"; // set to the default value
If (imgID. equals ("one") // if it is one
{
%>
<H3 id = "cartitle" style = "border-bottom: 1px solid # C0C0C0; margin-bottom:-5px"> Porsche Carrera GT <P> The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
Km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph ).
With 605 hp, the car weighs 1,380 (3,042 lb). The Carrera GT is only
Offered with a six-speed manual transmission, in contrast to its rival
Ferrari Enzo that is only offered with sequential manual transmission. Also
The Carrera GT is significantly less expensive than the Ferrari Enzo.
Ferrari Enzo is priced around $660,000 to the Carrera GT's $440,000.
Carrera GT is known for its high quality and reliability which makes it one
The best supercars ever.
<%} Else {// otherwise
%>
<H3 id = "cartitle" style = "border-bottom: 1px solid # C0C0C0; margin-bottom:-5px"> Ferrari Testarossa <P> The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
The name, which means "red head", comes from the red painted cylinder heads on
The flat-12 engine. The engine was technically a 180? V engine since it shared
Flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
KW), and the car won extends comparison tests and admirers-it was featured on
The cover of Road & Track magazine nine times in just five years. Almost
10,000 Testarossas, 512TRs, and 512 Ms were produced, making this one of
Most common Ferrari models despite its high price and exotic design.
<% }%>
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
