Home > Developer > JavaScript
Windows Shutdown Effect Analysis
When a user who uses Windows system shuts down, the interface only allows the user to choose to shut down, unregister, or cancel the action, and the program on the desktop is not available, and the screen appears dimmed.
This example will be implemented on the Web page in the same highlighted effect.
What are the benefits of using this shutdown effect on a Web page? First of all, because after clicking a link, the user is not available at this time hidden in the background, the available operations on the top of the screen, and highlighted, you can avoid the user's misoperation. Second, the information will be highlighted, you can also remind users of the matters should be noted.
Analysis of the effect of shutdown in Web page
The principle of achieving this effect in a Web page is simple. Create two layers, one for masking, covering the entire page and grayed out, another layer as the highlighted part, above the masking layer, set by setting the Z-index property of the layer. When the shutdown effect is canceled, you can simply remove the two layer elements from the page.
The following code implementation shows the shutdown effect.
<title>html "class=" Wordstyle ">asp?typeid=119" snap_preview_added= "no" >ajax LightBox >
<style type= "text/html" class= "Wordstyle" >asp?typeid=38 "snap_preview_added=" no ">css" >
#lightbox {/* This layer is 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 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 layer * *
Display:block;
z-index:9998; /* Set the HIGHLIGHT layer below * * *
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>
<body>
<!--the layer is covering layer-->
<div id= "Overlay" ></div>
<!--the layer is highlighted layer-->
<div id= "Lightbox" ></div>
</body>
It should be noted that in IE browser if there is a <select> tag, the tag can not be overwritten, but in other browsers can be overridden.
When using IE browser, you should first hide the <select> elements in the Web page. The following code can be used to hide all <select> elements of a 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, the user clicks the link, sends the request to the server, and displays the return information on the highlighted layer. The client's Web page file code looks like this:
<title>ajax lightbox</title>
<!--CSS style sheet files used in this example-->
<link href= "Lightbox.css" Type=text/css rel=stylesheet>
<!--prototype class file-->
<script type= "text/html" class= "Wordstyle" >asp?typeid=36 "snap_preview_added=" no ">html" class= "Wordstyle" >javascript "src=" Js/prototype.js "></script>
<!--This example uses the HTML "class=" Wordstyle >javascript code-->
<script type= "text/html" class= "Wordstyle" >javascript "src=" ></script>
<body>
<div id=container>
<UL>
<li><a class=lbon href= "getinfo.html class=" Wordstyle ">jsp?id=one" >One</A>
</LI>
<li><a class=lbon href= "getinfo.html class=" Wordstyle ">jsp?id=two" >Two</A>
</LI>
</UL>
</div>
</body>
In addition, you need to set the CSS style that the page uses. The LIGHTBOX.CSS style sheet file code looks like this:
#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; opacity:. moz-opacity:0.8
}
UNKNOWN {
position:fixed
}
. Done#lightbo X #lbLoadMessage {
Display:none
}
. done#lightbox #lbContent {
Display:block
}
. loading#lightbox #lbContent {
Display:none
}
. loading#lightbox #lbLoadMessage {
Display:block
}
. Done#lightbox IM G {
width:100%; height:100%
}
Client Script
Because browsers have different support for layers, you first need to determine the type of client browser. The following code can be used to determine the client's browser and HTML "class=" Wordstyle ">asp"
snap_preview_added= "No" > Operating system.
var detect = Navigator.userAgent.toLowerCase ();
var os,browser,version,total,thestring;
function Getbrowserinfo () {
if (Checkit (' Konqueror ')) {
Browser = "Konqueror";
OS = "html" class= "Wordstyle" >asp?typeid=60 "snap_preview_added=" no ">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 (' compatible ')) {
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 to place;
}
Let's look at the method that you need to add when you load a Web page. The code for the Web page load and initialization method is as follows:
Web page load calls Initialize and Getbrowserinfo methods
Event.observe (window, ' Load ', initialize, false);
Event.observe (window, ' Load ', Getbrowserinfo, false);
Empty cache when not loaded
Event.observe (window, ' unload ', Event.unloadcache, false);
Initialization method
function Initialize () {
Call this method to add the overlay and highlight layer for the page
Addlightboxmarkup ();
Create a Lightbox object for each element that can be highlighted
Lbox = Document.getelementsbyclassname (' Lbon ');
for (i = 0; i < lbox.length; i++) {
valid = new Lightbox (Lbox[i]);
}
}
Using the DOM method to create the 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);
}
Encapsulation Lightbox Class
When the data is initialized, a Lightbox object is created for each link that can be highlighted. The code for this class is specifically implemented as follows:
var lightbox = Class.create ();
Lightbox.prototype = {
ypos:0,
xpos:0,
Construct method, CTRL to create the element of the object
Initialize:function (ctrl) {
Assign a link to the element to This.content
This.content = Ctrl.href;
Add 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 ') {//judged as IE browser
This.getscroll ();
This.prepareie (' 100% ', ' hidden ');
This.setscroll (0,0);
This.hideselects (' hidden '); hide all <select> marks
}
Call the Displaylightbox method in the 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.documentelement && document.documentElement.scrollTop) {
This.ypos = Document.documentElement.scrollTop;
else if (document.body) {
This.ypos = Document.body.scrollTop;
}
},
Setscroll:function (x, y) {
Window.scrollto (x, y);
},
Displaylightbox:function (Display) {
Display the overlay layer
$ (' overlay '). style.display = display;
Display the highlight layer
$ (' Lightbox '). style.display = display;
If it is not a hidden state, the Loadinfo method in that class is invoked
if (Display!= ' None ') this.loadinfo ();
},
This method sends an AJAX request
Loadinf function () {
Call the ProcessInfo method in this class when the request completes
var myajax = new Ajax.request (
This.content,
{method: ' Get ', Parameters: "", OnComplete:this.processInfo.bindAsEvent Listener (This)}
);
},
Displays the returned text information to the highlight layer
Processinf function (response) {
Get the returned text data
var result = Response.responsetext;
Show to highlight layer
info = "<div id= ' lbcontent ' >" + result + "</div>";
Inserts an element before the info element
New Insertion.before ($ (' lbloadmessage '), info)
Change the value of the element's class name
$ (' Lightbox '). ClassName = "Done";
Invoke the actions method in this class
This.actions ();
var ctrl=$ (' Lightbox ');
Add an event handling method to the highlight layer reset
Event.observe (CTRL, ' click ', This.reset.bindAsEventListener (this), false);
Ctrl.onclick = function () {return false;};
},
Restore Initial state
Reset:function () {
Hide Cover Layer
$ (' overlay '). style.display= "None";
Empty return Data
$ (' lbcontent '). innerhtml= "";
Hide 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 this object is more complex, readers can read the comments section of the code carefully.
Server-side code
The server side first obtains the "id" value in the query, or sets the default value if the value is null or empty. And then
The value is judged, and the corresponding string information is returned. The getinfohtml "class=" Wordstyle that handles the request >jsp the page code as follows:
<%@ page language= "java" import= "java.util.*"%>
<%
Get the value of the ID in the request
String Imgid = request.getparameter ("id");
if (imgid==null| | Imgid.equals (""))//if NULL or null
Imgid= "one";//Set as default value
if (Imgid.equals ("one"))//If one
{
%>
<p>the Carrera GT has a 5.7 litre V10 internal combustion engine that produces
605 SAE horsepower (451 KW). Porsche claims it would accelerate from 0 to 100
Km/h (mph) in 3.9 seconds and has a maximum speed of km/h (204 mph).
With 605 HP, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
Offered with a six-speed manual transmission, in contrast to its rival the
Ferrari Enzo is offered with sequential manual transmission. Also
The Carrera GT is significantly less expensive than the Ferrari Enzo. The
Ferrari Enzo is priced around $660,000 to the Carrera GT ' s $440,000. The
Carrera GT is known to its high quality and reliability which makes it one of
The best supercars ever.
<%}else{//otherwise
%>
<p>the Ferrari Testarossa is a V12 mid-engined sports car made by Ferrari.
The name, which means "red head" comes from the red painted cylinder
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 many comparison tests and admirers-it is featured on
The cover of Road & Track magazine nine times in just five years. Almost
10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
Most common Ferrari models despite its high price and exotic.
<%}%>
HTML "class=" Wordstyle ">aspx" snap_preview_added= "Spa" snap_icon_added= "Spa" ac
T_suffix icon_trigger= "false" text_trigger= "true" parent_link_icon= "false" >
Http://blog.csdn.net/danforn/archive/2007/03/09/1525255.html "class=" Wordstyle ">
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
