html/css/js-layer彈出層的初次使用
阿新 • • 發佈：2018-10-24
func order 鸚鵡 麻煩 bottom content layer document margin
學習前端有時很多時候要用到彈出層，原生的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="width:1000px;height:1000px;margin:auto;border:1px solid #999;"> 16 <button style="width: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="width:298px;height:138px;float:left;border:1px solid #ccc;margin:30px 0 0 0;"> 24 <input style="width:294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="text" placeholder="註冊新用戶"> 25 <input style="width:294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="password" placeholder="請設置密碼"> 26 <input style="width: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="width: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>
html/css/js-layer彈出層的初次使用