Pop-up layer effect on many sites are used, today to organize the recent project to use a small effect, click on the collapse of a layer to fill out information to the user. Pop-up layer code is JQ dynamic creation, everyone writing is different, the demand is not the same, all the choice to meet their own can.
Html:
Copy Code code as follows:
<H1 class= "BM" ><a href= "javascript:;" > I want to sign up </a>
Copy Code code 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 #dfdf DF;}
. 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 Code code 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 <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> enrollment number <b>*</b>:</span><input type= "text" class= "Layer_txt" name= "Num" ></li>;
Layer + + <li><span> Guestbook: </span><textarea id= "message" rows= "2" cols= "" class= "Layer_txt" > </textarea></li> ';
Layer + = ' </ul> '; Layer_cont End
Layer + + "<div class=" layer_btn "><input type=" Submit "class=" LAYER_SUBMIT_BTN "value=" submitted "/></div>" ;
Layer + = ' </div> '; Layer_item End
$ (' body '). Append (LAYER_BG);
$ (' body '). append (layer);
var winw = $ (window). width ();
var Winh = $ (window). Height ();
var objh = $ ('. Layer_item '). Height ();
var OBJW = $ ('. Layer_item '). width ();
$ ('. Layer_item '). css ({' Height ': 0});
$ ('. BM '). Click (function () {
$ ('. Layer_bg '). CSS (' opacity ', 0.7). FadeIn ();
$ ('. Layer_item '). Animate ({' Height ': objh, ' margintop ':-objh/2},500);
});
$ ('. Layer_title a '). On (' click ', function () {
$ ('. Layer_item '). Animate ({' height ': 0, ' margintop ': 0},, function () {
$ ('. Layer_bg '). fadeout ();
});
});
});
Effect Chart:
