Use JavaScript to achieve the imitation Windows shutdown effect

Use JavaScript to achieve the imitation Windows shutdown effect_javascript skills

WBOY

Release： 2016-05-16 19:17:11

Original

1442 people have browsed it

Basic Principle Analysis

Windows Shutdown Effect Analysis
When users using the Windows system shut down, the interface that appears only allows the user to choose shutdown, logout or cancel actions, but no programs on the desktop can be used, and The screen appears gray.

This example will imitate this highlighting effect on a web page.

What are the benefits of using this shutdown effect on a web page? First of all, after clicking a certain link, the operations that are not available to the user at this time are hidden in the background, and the available operations are placed at the top of the screen and highlighted, which can avoid misoperation by the user. Secondly, highlighting information can also remind users of things they should pay attention to.
Analysis of shutdown effects in web pages
The principle of implementing this effect in web pages is very simple. Create two layers, one is the mask layer, covering the entire page and appears in gray; the other layer is the highlighted part, above the mask layer. This can be set by setting the z-index property of the layer. . After canceling the shutdown effect, just delete these two layer elements from the page.
The following code implements the display shutdown effect.

AJAX LightBox Sample
#lightbox {/*This layer is highlighted Display layer*/
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid;
DISPLAY: block; Z-INDEX: 9999; /*Set this layer in At the top of the web page, set it to be 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 the overlay*/
DISPLAY: block; Z-INDEX: 9998; /*Set the highlight layer below* / Filter: Alpha (OPACITY = 80);/*Set to transparent*/
left: 0px; HEIGHT: 100%; 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[i].style.vis ibility = visibility;
                                                                                                    = 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){

                                                                                                                                                                       != 'none') this.loadInfo();
},

//This method sends an Ajax request
loadInfo: function() {
//This method is called when the request is completed processInfo method in the class
       ); > var result = response.responseText;
//Display to highlight layer
info = "
" result "
“; lightbox').className = "done";
                                                                                                                                                                                                                 This.actions() Bright layer added event handling method reset
Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
                                                                                                                                                        /Clear the returned data
                               $('lbContent')                                                                                                                                                                ,
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i                    Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
                   lbActions[i ].onclick = function(){return false;};
                                                                                                                .

Server-side code

The server-side first gets the "id" value in the query, and 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:

//Get the value of the id 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
{
%>

Porsche Carrera GT

The Carrera GT has a 5.7 liter 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 Weight 1,380 kg (3,042 LB). The Carrera GT Is only
Offered with a Six-Speed Manual Transmission, in the contrast to my
Ferrari Enz o that is only offfered 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 ability which makes it one of
the best supercars ever.
%>

Ferrari Testarossa

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.