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;">&nbsp;我已阅读并接受鹦鹉网</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" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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弹出层的初次使用的主要内容,如果未能解决你的问题,请参考以下文章

jquery layer怎么弹出指定的html内元素

js的事件冒泡和点击其他区域隐藏弹出层

弹出层(动态实现弹出层的自由控制)

关于layui弹出层的使用

layer弹出层的关闭问题

js点击任意区域弹出层消失,js点击弹出层之外的任意区域弹出层消失,常见弹层的封装