Basic principles analysis
Analysis of Windows shutdown effect
When users using Windows systems shut down, the interface that appears only allows users to choose shutdown, log out or cancel the actions, while the programs on the desktop cannot be used, and the screen is grayed out.
This example will be implemented on the web page according to this highlighting effect.
What are the benefits of using this shutdown effect on a web page? First, after clicking a link, the actions that are not available to the user at this time are hidden in the background, and the available actions are placed at the top of the screen and highlighted, which can avoid the user's misoperation. Secondly, highlighting the information can also remind users of things that should be paid attention to.
Analysis of shutdown effect on web pages
The principle of achieving this effect in a web page is simple. Create two layers, one as a shading layer, covering the entire page and displaying in gray; the other layer as a highlighted part, above the shading layer, which can be set by setting the layer's z-index property. When the shutdown effect is cancelled, just delete these two layer elements in the page.
The following code implements the shutdown effect.
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#lightbox {/*This layer is a highlight layer*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999;/*Set this layer at the top of the web page, set it 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 a cover layer*/
DISPLAY: block;
Z-INDEX: 9998;/*Set the bottom of the highlight 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 ></div>
<!--This layer is the highlight layer -->
<div ></div>
</body>
</html>
It should be noted that if there is a <select> tag in IE browser, the tag cannot be overwritten by the overlay layer, but it can be overwritten in other browsers.
When using IE browser, first hide the <select> element in the web page. For example, the following code can be used to hide all <select> elements of the page.
selects = ('select');
for(i = 0; i < ; i++) {
selects[i]. = visibility;
}
Code implementation
Client Code
There are two links on the client's page. After the user clicks the link, he sends a request to the server and displays the return information on the highlight layer. The client's web page file code is as follows:
<html>
<head>
<title>AJAX LightBox</title>
<!-- The css stylesheet file used in this example-->
<LINK href="" type=text/css rel=stylesheet>
<!--prototype file-->
<script type="text/javascript" src="js/" ></script>
<!--The javascript code used in this example-->
<script type="text/javascript" src="" ></script>
</head>
<body>
<DIV id=container>
<UL>
<LI><A class=lbOn href="?id=one">One</A>
</LI>
<LI><A class=lbOn href="?id=two">Two</A>
</LI>
</UL>
</div>
</body>
</html>
In addition, you also need to set the CSS style used on this page. The stylesheet 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
Since browsers support different layers, the first thing to do is to determine the type of client browser. The following code can be used to determine the client's browser and operating system.
var detect = ();
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('compatible')) {
browser = "Netscape Navigator"
version = (8);
}
else browser = "An unknown browser";
if (!version) version = (place + );
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 = (string) + 1;
thestring = string;
return place;
}
Let’s take a look at the methods you need to add when loading a web page. The code for web page loading and initialization methods is as follows:
//Web page loading calls initialize and getBrowserInfo methods
(window, 'load', initialize, false);
(window, 'load', getBrowserInfo, false);
//Clear cache when not loaded
(window, 'unload', , false);
//Initialization method
function initialize(){
//Call this method to add overlay and highlighting layers to the page
addLightboxMarkup();
//Create a lightbox object for each highlighted element
lbox = ('lbOn');
for(i = 0; i < ; i++) {
valid = new lightbox(lbox[i]);
}
}
// Use the Dom method to create overlay and highlight layers
function addLightboxMarkup() {
bod = ('body')[0];
overlay = ('div');
= 'overlay';
lb = ('div');
= 'lightbox';
= 'loading';
= '<div >' +
'<p>Loading</p>' +
'</div>';
(overlay);
(lb);
}
Encapsulate lightbox class
When initializing the data, a lightbox object is created for each highlighted link. The specific implementation of the code of this class is as follows:
var lightbox = ();
= {
yPos : 0,
xPos : 0,
//Construction method, ctrl is the element that creates the object
initialize: function(ctrl) {
// Assign the link of this element to
= ;
//Add onclick event activated method for this element
(ctrl, 'click', (this), false);
= function(){return false;};
},
//When clicking on the link
activate: function(){
if (browser == 'Internet Explorer'){//Judged as IE browser
();
('100%', 'hidden');
(0,0);
('hidden');//Hide all <select> tags
}
//Calling the displayLightbox method in this class
("block");
},
prepareIE: function(height, overflow){
bod = ('body')[0];
= height;
= overflow;
htm = ('html')[0];
= height;
= overflow;
},
hideSelects: function(visibility){
selects = ('select');
for(i = 0; i < ; i++) {
selects[i]. = visibility;
}
},
getScroll: function(){
if () {
= ;
} else if ( && ){
= ;
} else if () {
= ;
}
},
setScroll: function(x, y){
(x, y);
},
displayLightbox: function(display){
//Show the overlay layer
$('overlay'). = display;
//Display the highlighted layer
$('lightbox'). = display;
//If it is not a hidden state, call the loadInfo method in this class
if(display != 'none') ();
},
//This method sends an Ajax request
loadInfo: function() {
//When the request is completed, call the processInfo method in this class
var myAjax = new (
,
{method: 'get', parameters: "", onComplete: Listener (this)}
);
},
// Display the returned text information on the highlight layer
processInfo: function(response){
//Get the returned text data
var result = ;
//Show to highlight layer
info = "<div id='lbContent'>" + result + "</div>";
//Insert an element in front of the info element
new ($('lbLoadMessage'), info)
//Change the value of the class name of this element
$('lightbox').className = "done";
//Calling the actions method in this class
();
var ctrl=$('lightbox');
//Add event handling method reset for the highlight layer
(ctrl, 'click', (this), false);
= function(){return false;};
},
//Restore the initial state
reset:function(){
//Hide overlay
$('overlay').="none";
//Clear back data
$('lbContent').innerHTML="";
//Hide the highlight layer
$('lightbox').="none";
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = ('lbAction');
for(i = 0; i < ; i++) {
(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
}
}
Tip: Because this object is complex, readers can carefully refer to the comments section of the code.
Server-side code
The server first gets the "id" value in the query. If the value is null or empty, it is set to the default value. Then determine the value and return the corresponding string information. The getInfojsp page code for processing the request is as follows:
<%@ page language="java" import=".*"%>
<%
//Get the value of the id in the request
String imgID = ("id");
if (imgID==null||(""))//If null or empty
imgID="one";//Set as default value
if ( ("one"))//If it is one
{
%>
<h3 style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<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 kg (3,042 lb). The Carrera GT is only
offered with a six-speed manual transmission, in contrast to its rival the
Ferrari Enzo that is only 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 for its high quality and reliability which makes it one of
the best supercars ever.
<%}else{//Otherwise
%>
<h3 style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<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 many 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 512Ms were produced, making this one of the
most common Ferrari models despite its high price and exotic design.
<%}%>
Analysis of Windows shutdown effect
When users using Windows systems shut down, the interface that appears only allows users to choose shutdown, log out or cancel the actions, while the programs on the desktop cannot be used, and the screen is grayed out.
This example will be implemented on the web page according to this highlighting effect.
What are the benefits of using this shutdown effect on a web page? First, after clicking a link, the actions that are not available to the user at this time are hidden in the background, and the available actions are placed at the top of the screen and highlighted, which can avoid the user's misoperation. Secondly, highlighting the information can also remind users of things that should be paid attention to.
Analysis of shutdown effect on web pages
The principle of achieving this effect in a web page is simple. Create two layers, one as a shading layer, covering the entire page and displaying in gray; the other layer as a highlighted part, above the shading layer, which can be set by setting the layer's z-index property. When the shutdown effect is cancelled, just delete these two layer elements in the page.
The following code implements the shutdown effect.
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#lightbox {/*This layer is a highlight layer*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999;/*Set this layer at the top of the web page, set it 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 a cover layer*/
DISPLAY: block;
Z-INDEX: 9998;/*Set the bottom of the highlight 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 ></div>
<!--This layer is the highlight layer -->
<div ></div>
</body>
</html>
It should be noted that if there is a <select> tag in IE browser, the tag cannot be overwritten by the overlay layer, but it can be overwritten in other browsers.
When using IE browser, first hide the <select> element in the web page. For example, the following code can be used to hide all <select> elements of the page.
selects = ('select');
for(i = 0; i < ; i++) {
selects[i]. = visibility;
}
Code implementation
Client Code
There are two links on the client's page. After the user clicks the link, he sends a request to the server and displays the return information on the highlight layer. The client's web page file code is as follows:
<html>
<head>
<title>AJAX LightBox</title>
<!-- The css stylesheet file used in this example-->
<LINK href="" type=text/css rel=stylesheet>
<!--prototype file-->
<script type="text/javascript" src="js/" ></script>
<!--The javascript code used in this example-->
<script type="text/javascript" src="" ></script>
</head>
<body>
<DIV id=container>
<UL>
<LI><A class=lbOn href="?id=one">One</A>
</LI>
<LI><A class=lbOn href="?id=two">Two</A>
</LI>
</UL>
</div>
</body>
</html>
In addition, you also need to set the CSS style used on this page. The stylesheet 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
Since browsers support different layers, the first thing to do is to determine the type of client browser. The following code can be used to determine the client's browser and operating system.
var detect = ();
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('compatible')) {
browser = "Netscape Navigator"
version = (8);
}
else browser = "An unknown browser";
if (!version) version = (place + );
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 = (string) + 1;
thestring = string;
return place;
}
Let’s take a look at the methods you need to add when loading a web page. The code for web page loading and initialization methods is as follows:
//Web page loading calls initialize and getBrowserInfo methods
(window, 'load', initialize, false);
(window, 'load', getBrowserInfo, false);
//Clear cache when not loaded
(window, 'unload', , false);
//Initialization method
function initialize(){
//Call this method to add overlay and highlighting layers to the page
addLightboxMarkup();
//Create a lightbox object for each highlighted element
lbox = ('lbOn');
for(i = 0; i < ; i++) {
valid = new lightbox(lbox[i]);
}
}
// Use the Dom method to create overlay and highlight layers
function addLightboxMarkup() {
bod = ('body')[0];
overlay = ('div');
= 'overlay';
lb = ('div');
= 'lightbox';
= 'loading';
= '<div >' +
'<p>Loading</p>' +
'</div>';
(overlay);
(lb);
}
Encapsulate lightbox class
When initializing the data, a lightbox object is created for each highlighted link. The specific implementation of the code of this class is as follows:
var lightbox = ();
= {
yPos : 0,
xPos : 0,
//Construction method, ctrl is the element that creates the object
initialize: function(ctrl) {
// Assign the link of this element to
= ;
//Add onclick event activated method for this element
(ctrl, 'click', (this), false);
= function(){return false;};
},
//When clicking on the link
activate: function(){
if (browser == 'Internet Explorer'){//Judged as IE browser
();
('100%', 'hidden');
(0,0);
('hidden');//Hide all <select> tags
}
//Calling the displayLightbox method in this class
("block");
},
prepareIE: function(height, overflow){
bod = ('body')[0];
= height;
= overflow;
htm = ('html')[0];
= height;
= overflow;
},
hideSelects: function(visibility){
selects = ('select');
for(i = 0; i < ; i++) {
selects[i]. = visibility;
}
},
getScroll: function(){
if () {
= ;
} else if ( && ){
= ;
} else if () {
= ;
}
},
setScroll: function(x, y){
(x, y);
},
displayLightbox: function(display){
//Show the overlay layer
$('overlay'). = display;
//Display the highlighted layer
$('lightbox'). = display;
//If it is not a hidden state, call the loadInfo method in this class
if(display != 'none') ();
},
//This method sends an Ajax request
loadInfo: function() {
//When the request is completed, call the processInfo method in this class
var myAjax = new (
,
{method: 'get', parameters: "", onComplete: Listener (this)}
);
},
// Display the returned text information on the highlight layer
processInfo: function(response){
//Get the returned text data
var result = ;
//Show to highlight layer
info = "<div id='lbContent'>" + result + "</div>";
//Insert an element in front of the info element
new ($('lbLoadMessage'), info)
//Change the value of the class name of this element
$('lightbox').className = "done";
//Calling the actions method in this class
();
var ctrl=$('lightbox');
//Add event handling method reset for the highlight layer
(ctrl, 'click', (this), false);
= function(){return false;};
},
//Restore the initial state
reset:function(){
//Hide overlay
$('overlay').="none";
//Clear back data
$('lbContent').innerHTML="";
//Hide the highlight layer
$('lightbox').="none";
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = ('lbAction');
for(i = 0; i < ; i++) {
(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
}
}
Tip: Because this object is complex, readers can carefully refer to the comments section of the code.
Server-side code
The server first gets the "id" value in the query. If the value is null or empty, it is set to the default value. Then determine the value and return the corresponding string information. The getInfojsp page code for processing the request is as follows:
<%@ page language="java" import=".*"%>
<%
//Get the value of the id in the request
String imgID = ("id");
if (imgID==null||(""))//If null or empty
imgID="one";//Set as default value
if ( ("one"))//If it is one
{
%>
<h3 style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<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 kg (3,042 lb). The Carrera GT is only
offered with a six-speed manual transmission, in contrast to its rival the
Ferrari Enzo that is only 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 for its high quality and reliability which makes it one of
the best supercars ever.
<%}else{//Otherwise
%>
<h3 style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<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 many 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 512Ms were produced, making this one of the
most common Ferrari models despite its high price and exotic design.
<%}%>