學習前端有時很多時候要用到彈出層，原生的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>