Section 133th, JavaScript, packaging Library-Popup Login box

JavaScript, Packaging Library--Popup Login box

Two additional methods for encapsulating the library

Yuan_su_ju_zhong () method to center the acquired chunk element into the page,
Chuang_kou_shi_jian () method, browser window event, when the size of the window changes when the function is triggered

/** Yuan_su_ju_zhong () method to center the acquired chunk element into the page, * Note: When using this method, the target block is set to the CSS (absolute positioning, position:absolute;) **/Feng_zhuang_ku.prototype.yuan_su_ju_zhong=function () {    if( This. jie_dian.length = = 1) {        varYan_su =NULL;  for(vari = 0; I < This. jie_dian.length; i++) {Yan_su= This. Jie_dian[i]; }        varstyle = window.getComputedStyle? window.getComputedStyle (YAN_SU,NULL) :NULL||Yan_su.currentstyle; varY_style =Style.display; if(Y_style = = = "None") {Yan_su.style.display= "Block"; }        varwidth =Yan_su.offsetwidth; varHeight =Yan_su.offsetheight; if(Y_style = = = "None") {Yan_su.style.display= "None"; }        vartop = (document.documentelement.clientheight-height)/2; varleft = (document.documentelement.clientwidth-width)/2;  for(varII = 0; II < This. jie_dian.length; ii++) {             This. Jie_dian[ii].style.top = top + ' px ';  This. Jie_dian[ii].style.left = left + ' px '; }    } Else{alert ("Block element page center, can only set a chunk element, currently Jie_dian array is a number of elements please check!" ")    }    return  This;};/** Chuang_kou_shi_jian () method, browser window event, when the size of the window changes when the function is triggered * receives a parameter, is the function to execute when triggered (including function) **/Feng_zhuang_ku.prototype.chuang_kou_shi_jian=function(FN) {window.onresize=fn; return  This;};

Popup Login Box

HTML code

<DivID= "Login">    <H2><imgsrc= "Img/close.png"alt=""class= "Close" />Website Login</H2>    <Divclass= "User">Account<inputtype= "text"name= "User"class= "text" /></Div>    <Divclass= "Pass">Password<inputtype= "Password"name= "Pass"class= "text" /></Div>    <Divclass= "button"><inputtype= "button"class= "Submit"value="" /></Div>    <Divclass= "Other">Register a new user | Forgot your password?</Div></Div>

CSS Code

/*Login Box*/#login{width:350px;Height:250px;Border:1px solid #ccc;position:Absolute;Display:None;}#login H2{background:rgba (0, 0, 0, 0) url ("Img/login_header.png") repeat-x scroll 0 0;Border-bottom:1px solid #ccc;Color:#666;font-size:14px;Height:40px;Line-height:40px;text-align:Center;letter-spacing:1px;margin:0 0 20px;}#login h2 img{cursor:Pointer;float: Right;position:relative; Right:8px;Top:14px;}#login div.user, #login div.pass{Color:#666;font-size:14px;padding:5px 0;text-align:Center;}#login Input.text{background:#fff None Repeat scroll 0 0;Border:1px solid #ccc;font-size:14px;Height:25px;width:200px;}#login. Button{padding:20px 0;text-align:Center;}#login Input.submit{background:rgba (0, 0, 0, 0) url ("Img/login_button.png") no-repeat scroll 0 0;Border:Medium None;cursor:Pointer;Height:30px;width:107px;}#login. Other{Color:#666;padding:15px 10px;text-align: Right;

Front desk JS Code

//Popup Login Box    //Gets the login box, executes the Login box Center method, executes the browser window event method$ (). HUO_QU_ID (' login '). Yuan_su_ju_zhong (). Chuang_kou_shi_jian (function () {        //Gets the login box, which executes the center method of the login box$ (). HUO_QU_ID (' login '). Yuan_su_ju_zhong ();    }); //Get login element node, execute Click event Method$ (). Huo_qu_class (' Deng_lu '). On_click (function () {        //Get login box, change CSS$ (). HUO_QU_ID (' login '). CSS (' Display ', ' block ');    }); //gets the close element in the login box, executes the Click event Method$ (). Huo_qu_class (' close '). On_click (function () {        //Get login box, change CSS$ (). HUO_QU_ID (' login '). CSS (' Display ', ' none '))    });

Section 133th, JavaScript, packaging Library-Popup Login box