学习前端有时很多时候要用到弹出层，原生的js写有些麻烦，而且不美观，基于jQuery的弹出层组件layer应运而生，近些年来备受青睐。官网上有使用教程，但当初用的时候还是糊里糊涂，今天来记录一下layer组件的步骤
1step:
新建一个html文件，并引入下载好的jQuery和layer.js。
2step:
码字
1 <!doctype html>
2 <html>
3 <meta charset="utf-8">
4 <head>
5 <title></title>
6 <style>
7
8 </style>
9 <!--导入外部js脚本-->
10 <script src="../jquery-3.3.1.js"></script>
11
12 <script src="../layer例子/layer-v3.1.1/layer/layer.js"></script>
13 </head>
14 <body>
15 <div style="1000px;height:1000px;margin:auto;border:1px solid #999;">
16 <button style="70px;height:40px;float:left;font-size:13px;line-height:20px;text-align:center;" onClick="openRegister()">点击我</button>
17 </div>
18
19 <!--弹出层界面-->
20 <div style="display:none;padding:30px;" id="registerlayer">
21 <span style="color:#999;font-size:25px;float:left">注册</span>
22 <span style="color:#999;font-size:13px;float:right;margin:10px 0 0 0;" class="hover3" onClick="goLogin()">快速登录</span>
23 <div style="298px;height:138px;float:left;border:1px solid #ccc;margin:30px 0 0 0;">
24 <input style="294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="text" placeholder="注册新用户">
25 <input style="294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="password" placeholder="请设置密码">
26 <input style="294px;height:42px;border:1px solid #fff;" type="password" placeholder="请确认密码">
27 </div>
28 <input style="margin:20px 0 0 0;float:left;" type="checkbox" id="registerAgree" checked="checked" >
29 <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#999;"> 我已阅读并接受鹦鹉网</span>
30 <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#069;" class="hover4">《服务协议》</span>
31 <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#999;">和</span>
32 <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#069;" class="hover4">《账户协议》</span>
33 <div style="298px;height:40px;float:left;background:#6FAC22;margin:30px 0 0 0;text-align:center;line-height:40px;font-size:16px;" id="register" >注 册</div>
34 </div>
35
36 <script>
37 //注册弹出层
38 function openRegister(){
39 layer.open({
40 type: 1,
41 title: false,
42 area : ['360px' , '400px'],
43 closeBtn: 0,
44 shadeClose: true,
45 skin: 'yourclass',
46 content: $('#registerlayer'),
47 });
48 }
49
50
51 $(document).ready(function(){
52 $("#registerAgree").click(function(){
53
54 var check=document.getElementById("registerAgree");
55
56 if(check.checked!=true){
57 $("#register").css("background","#ccc");
58 }
59 else {
60 $("#register").css("background","#6FAC22");
61 }
62 });
63 });
64 </script>
65
66 </body>