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

The pop-up layer effects are used on many websites. Today, we will sort out a small effect that has been used in recent projects. Click fold 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:
Copy codeThe Code is as follows:
<H1 class = "bm"> <a href = "javascript:;"> I want to register </a>
Copy codeThe 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:
Copy codeThe Code is as follows:
$ (Function (){
Var layer_bg = '<div class = "layer_bg"> </div>'; // layer_bg
Var layer = '<div class = "layer_item">'; // layer_item
Layer + = '<div class = "layer_title"> Layer + = '<ul>'; // layer_cont
Layer + = '<li> <span> real name <B> * </B>: </span> <input type = "text" class = "layer_txt" name = "name"> </li> ';
Layer + = '<li> <span> mobile phone <B> * </B>: </span> <input type = "text" class = "layer_txt" name = "tel"> </li> ';
Layer + = '<li> <span> QQ: </span> <input type = "text" class = "layer_txt" name = "qq"> </li> ';
Layer + = '<li> <span> Number of registrants <B> * </B>: </span> <input type = "text" class = "layer_txt" name = "num"> </li> ';
Layer + = '<li> <span> message: </span> <textarea id = "message" rows = "2" cols = "20" class = "layer_txt"> </textarea> </li> ';
Layer + = '</ul>'; // layer_cont end
Layer + = '<div class = "layer_btn"> <input type = "submit" class = "layer_submit_btn" value = "submit"/> </div> ';
Layer + = '</div>'; // 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 ();
});
});
});

: