Jquery original pop-up layer folding effect click collapse to bring up a layer _ jquery

Today, I sorted out a small effect that was used in my recent project. Click collapse to pop up a layer to fill in information for users. If you are interested, you can learn the effect of the pop-up layer, which is used by many websites, today, we will organize a small effect that has been used in recent projects. Click collapse to bring up a layer to fill in information for users. The code at the pop-up layer is dynamically created by jq. each user has different writing methods and different requirements. All the options must comply with their own requirements.

Html:

The Code is as follows:

I want to register

The Code is as follows:

* {Margin: 0; padding: 0 ;}
Body {font: 14px 'Microsoft yahei'; color: #555 ;}
Li {list-style: none ;}
. Layer_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 10; display: none ;}
. Layer_item {position: fixed; left: 50%; top: 50%; width: 600px; margin-left:-300px; display: inline; overflow: hidden; background: # fff; z-index: 11 ;}
. Layer_item. layer_title {float: left; width: 100%; height: 75px; line-height: 75px; overflow: hidden; background: # FF4E00 ;}
. Layer_item. layer_title h1 {float: left; font-weight: normal; font-size: 35px; text-indent: 20px; color: # fff ;}
. Layer_item. layer_title a {float: right; width: 75px; height: 75px; line-height: 65px; text-align: center; font-size: 60px; color: # fff; text-decoration: none; background: #535961 ;}
. Layer_item ul {float: left; width: 100%; padding: 10px 0 ;}
. Layer_item ul li {float: left; width: 100%; line-height: 35px; padding: 10px 0; overflow: hidden ;}
. Layer_item ul li span {float: left; width: 100px; text-indent: 20px; text-align: right; padding-right: 10px ;}
. Layer_item ul li span B {color: Red ;}
. Layer_item ul li. layer_txt {float: left; width: 300px; height: 23px; line-height: 23px; padding: 5px; border: 1px solid # dfdfdf ;}
. Layer_item ul li # message {width: 400px; height: 150px ;}
. Layer_item. layer_btn {float: left; width: 100%; padding-bottom: 40px ;}
. Layer_item. layer_btn. layer_submit_btn {float: left; width: 100px; height: 40px; text-align: center; overflow: hidden; background: # FF4E00; color: # fff; margin-left: 110px; display: inline; border: none; font: 14px 'Microsoft yahei'; line-height: 40px ;}

Jq:

The Code is as follows:

$ (Function (){
Var layer_bg ='

'; // Layer_bg
Var layer ='

'; // Layer_item
Layer + ='

I want to register x

'; // Layer_title
Layer + ='

'; // Layer_cont
Layer + ='
• Real name*:
';
Layer + ='
• Mobile phone*:
';
Layer + ='
• QQ:
';
Layer + ='
• Registrants*:
';
Layer + ='
• Message:
';
Layer + ='

'; // Layer_cont end
Layer + ='

';
Layer + ='

'; // Layer_item end
$ ('Body'). append (layer_bg );
$ ('Body'). append (layer );
Var winW = $ (window). width ();
Var winH = $ (window). height ();
Var obelist = $ ('. layer_item'). height ();
Var objW = $ ('. layer_item'). width ();
Detail ('.layer_item'detail .css ({'height': 0 });
$ ('. Bm'). click (function (){
Watermarks ('.layer_bg'0000.css ('opacity ', 0.7). fadeIn ();
$ ('. Layer_item'). animate ({'height': oblate, 'margintop ':-oblate/2}, 500 );
});
$ ('. Layer_title A'). on ('click', function (){
$ ('. Layer_item'). animate ({'height': 0, 'margintop ': 0}, 200, function (){
$ ('. Layer_bg'). fadeOut ();
});
});
});

: