A front-end blog (5)-Matte effect and tool.js implementation

Matte effect

The application of matte effect is still many, the effect:

The implementation principle is through a div as a mask, it to absolute behavior, height and width of the browser's height and width, the background is translucent, where the translucent effect to be compatible with IE, through Filter:alpha (opacity=30), it is equivalent to the other browser opacity : 0.3. The following code:

#screen {    position: absolute;     top:0;     Left:0;     background: #000;     opacity: 0.3;     z-index: 9998;     display: none;}

There are two properties that are not mentioned here, Z-index and display.

The Z-index is intended to make the subsequent area non-operable when the mask appears.

Display:none; At the beginning of the time is no mask, you need to click Login, register and other similar buttons to make it appear, so before it is not visible.

Here's the style of our login box to make an update:

#login {    ......    Z-index: 9999;}

Why is it? Because the login box is above the mask, the z-index of the login box must be larger than the mask.

Okay, we're done with the prep work, and we start thinking about how to make the mask wide and high for the browser width and height.

We create a lock () method:

 Tar.prototype.lock = function   () { Span style= "color: #0000ff;" >for  (var  i = 0; i < this . Elements.length; I++ ;  this . Elements[i].style.height =        Document.documentElement.clientHeight + ' px ' ;  this . elements[i].style.width = Document.documentElement.clientWidth +    ' px ' ;  return  this  ;}

Here we just change the display,height,widthof the elements, Using Document.documentElement.clientHeight and Document.documentElement.clientWidth.

Now that we have the lock () method, there is a way to unblock the mask unlock ():

// Unblock a mask function () {    for (var-elements.length; i++) {        this. Elements[i].style.display = "None";    }     return  This ;}

Very simple,display:none;

We then use these two methods to achieve a complete matte effect:

//Login Box    varLogin = $ (). GetId ("Login"); varScreen = $ (). GetId ("screen"); Login.center (350,250); Login.resize (function() {Login.center (350,250); if(Login.css ("display") = = "Block") {screen.lock ();    }    }); $ (). GetClass ("Close"). Click (function() {login.css ("Display", "none");    Screen.unlock ();    }); $ (). GetClass ("Login"). Click (function() {login.css ("Display", "block");    Screen.lock (); });

When you click Log in, the mask appears. When you click on "X", the mask disappears. When changing the size of the browser window, the mask will also be changed, but is not the browser window size changes, there will be a matte, so to add the condition:

When the login box appears, the mask appears and changes with the browser. Otherwise, the mask will appear as soon as you change the browser size.

Tool.js

Tool.js is used to store some basic tool methods. For example: To get the viewport size across browsers, to get a style across browsers, to determine if class exists, to add link rules across browsers, and to remove link rules across browsers. We extracted them for later reuse.

//get viewport size across browsersfunctionGetinner () {if(typeofWindow.innerheight! = ' undefined ') {        //alert ("1");        return{width:document.documentElement.clientWidth, height:document.documentElement.clientHeight }    }Else{        //alert ("2");        return{width:window.innerWidth, height:window.innerHeight} }}//get style across browsersfunctionGetStyle (element, attr) {if(typeofwindow.getComputedStyle! = ' undefined ') {// the        returnwindow.getComputedStyle (element,NULL) [attr]; }Else if(typeofElement.currentstyle! = ' undefined ') {//IE        returnElement.currentstyle[attr]; }}//determine if class existsfunctionhasclass (element, className) {return  This. Elements[i].classname.match (NewRegExp (' (\\s|^) ' + ClassName + ' (\\s|$) '));}//Add a link rule across browsersfunctioninertrule (sheet, selectortext, csstext, position) {if(typeofSheet.insertrule! = ' undefined ') {// theSheet.insertrule (Selectortext + ' {' + csstext + '} ', position); }Else if(typeofSheet.addrule! = ' undefined ') {//IESheet.addrule (Selectortext, csstext, position); }}//Remove link rules across browsersfunctionDeleteRule (sheet, index) {if(typeofSheet.deleterule! = ' undefined ') {// thesheet.deleterule (index); }Else if(typeofSheet.removerule! = ' undefined ') {//IEsheet.removerule (index); }}

Cond....

A front-end blog (5)-Matte effect and tool.js implementation