学习前端有时很多时候要用到弹出层，原生的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弹出层的初次使用
原文地址：https://www.cnblogs.com/zuoluwo/p/9842852.html