html/css/js-layer弹出层的初次使用
Posted 做路握vgf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html/css/js-layer弹出层的初次使用相关的知识，希望对你有一定的参考价值。
学习前端有时很多时候要用到弹出层，原生的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弹出层的初次使用的主要内容，如果未能解决你的问题，请参考以下文章