JQUERY+CSS3 Implement package Popup Login box effect

Original: JQUERY+CSS3 Implement package popup Login box effect

The last time I sent an article using JavaScript to implement the pop-up layer, this time just using jquery, so by the way record:

Because this time use bootstrap to do a project, but because does not use the bootstrap comes with the JS plug-in, so this pop-up box on its own implementation of the package to invoke, the effect is actually and bootstrap with the same effect. OK, check it out:

In fact, it is very simple, first of all HTML structure:

<DivID= "Mask"></Div>     <!--Translucent Matte Layer -<DivID= "Login">       <H3>Popup Layer Title</H3>       <Divclass= "Logincon">form Content</Div></Div>

Then set the CSS style first:

#mask{Background-color:#000;Opacity:0.5;Filter:Alpha (OPACITY=50);position:Absolute; Left:0;Top:0;Z-index: 9998;Display:None;}#login{position:fixed;width:400px;Z-index: 9999;Background-color:#fff;Border-radius:15px;Box-shadow:0 3px 4px #eee;Display:None;}

It should be easy to understand, generally set the style first, and then add display:none; hide it by default, and then we use jquery to get and calculate the Top/left value of the mask layer's width height and the horizontal vertical center position of the login box.

Here I will implement the login box effect encapsulated into a function:

//pop-up layerfunctionOpenDialog (id,classname) {varMask = $ (' #mask '); varLogin = $ (' # ' +ID); varSwidth = $ (document.body). Outerwidth (true);//gets the total width of the body of the window document, including border and padding    varSheight = $ (document.body). Outerheight (true);//gets the total height of the body of the window document, including border and padding    varCheight = $ (window). Height ();//gets the visual area height of the browser window    varLwidth = Login.width ();//width of the login box    varLheight = Login.height ();//height of the login box    varleft = (swidth-lwidth)/2;//calculate the left value of the login box: equals the total width minus the login box width and divided by 2    vartop = (cheight-lheight)/2;//calculate the top value of the Login box: equals the visible area height minus the login box height and divided by 2.Mask.css ({' Display ': ' Block ',        ' Width ': swidth + ' px ',        ' Height ': sheight + ' px '    }); Login.css ({' Display ': ' Block ',        ' Top ': Top + ' px ',        ' Left ': Left + ' px '}). addclass (' Animated Zoomindown ');//Adding animation classes    $('. ' + className). Click (function() {close (); });Mask.click (function() {close ();    }); //Hide mask layers and Login boxes    functionClose () {Mask.css (' Display ', ' none '); Login.css (' Display ', ' none '); }    return false;}

Where the ID of the function parameter refers to the ID value of the login box, and ClassName is the class name of the Close button, why not the ID value but the class name, my consideration is that a login box may have more than one close Cancel button, so use the class name more directly.

The next step is to call this function through an event:

// Login to register $ (' #btnLogin '). Click(function  () {    opendialog (' login ', ' close ');     return false ;});

Click on the Login registration button you set to achieve the pop-up effect, pass in your login box ID value and cancel the class name of the Close button, as to how to name it depends on what you use, here is the login box.

When I click the login button here, I added the animation effect, let the login box come out of the time is pop out. I am using an effect zoomindown in animate.css, but since I only use this one effect, So do not need to introduce the entire ANIMATE.CSS file, directly take the zoomindown corresponding style rules on the line, if the Zoomindown effect code is:

@-webkit-keyframes Zoomindown{0% {opacity:0;-webkit-transform:Scale3d (. 1,. 1,. 1) translate3d (0, -1000px, 0);Transform:Scale3d (. 1,. 1,. 1) translate3d (0, -1000px, 0);-webkit-animation-timing-function:Cubic-bezier (0.550, 0.055, 0.675, 0.190);animation-timing-function:Cubic-bezier (0.550, 0.055, 0.675, 0.190); }60%{Opacity:1;-webkit-transform:Scale3d (. 475,. 475,. 475) Translate3d (0, 60px, 0);Transform:Scale3d (. 475,. 475,. 475) Translate3d (0, 60px, 0);-webkit-animation-timing-function:Cubic-bezier (0.175, 0.885, 0.320, 1);animation-timing-function:Cubic-bezier (0.175, 0.885, 0.320, 1); }} @keyframes Zoomindown{0% {opacity:0;-webkit-transform:Scale3d (. 1,. 1,. 1) translate3d (0, -1000px, 0);Transform:Scale3d (. 1,. 1,. 1) translate3d (0, -1000px, 0);-webkit-animation-timing-function:Cubic-bezier (0.550, 0.055, 0.675, 0.190);animation-timing-function:Cubic-bezier (0.550, 0.055, 0.675, 0.190); }60%{Opacity:1;-webkit-transform:Scale3d (. 475,. 475,. 475) Translate3d (0, 60px, 0);Transform:Scale3d (. 475,. 475,. 475) Translate3d (0, 60px, 0);-webkit-animation-timing-function:Cubic-bezier (0.175, 0.885, 0.320, 1);animation-timing-function:Cubic-bezier (0.175, 0.885, 0.320, 1); }}.zoomindown{-webkit-animation:zoomindown 1s both;Animation:zoomindown 1s both;}

It's really time-consuming to write these effects, so it's really handy to take them directly. What you want to effect can go to the Animate.css Animation library to choose a favorite, and then take the corresponding code.

OK, this will achieve the beginning of the effect.

JQUERY+CSS3 Implement package Popup Login box effect