学习前端有时很多时候要用到弹出层，原生的js写有些麻烦，而且不美观，基于jQuery的弹出层组件layer应运而生，近些年来备受青睐。官网上有使用教程，但当初用的时候还是糊里糊涂，今天来记录一下layer组件的步骤

1step:

新建一个html文件，并引入下载好的jQuery和layer.js。

　　 2step:

　　 码字

　　

 <!doctype html>

 <html>

 <meta charset="utf-8">

 <head>

     <title></title>

     <style>

     </style>

     <!--导入外部js脚本-->

      <script src="../jquery-3.3.1.js"></script>

      <script src="../layer例子/layer-v3.1.1/layer/layer.js"></script>

 </head>

 <body>

     <div style="width:1000px;height:1000px;margin:auto;border:1px solid #999;">

         <button style="width:70px;height:40px;float:left;font-size:13px;line-height:20px;text-align:center;" onClick="openRegister()">点击我</button>

     </div>

     <!--弹出层界面-->

     <div style="display:none;padding:30px;" id="registerlayer">

         <span style="color:#999;font-size:25px;float:left">注册</span>

         <span style="color:#999;font-size:13px;float:right;margin:10px 0 0 0;" class="hover3" onClick="goLogin()">快速登录</span>

         <div style="width:298px;height:138px;float:left;border:1px solid #ccc;margin:30px 0 0 0;">

             <input style="width:294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="text" placeholder="注册新用户">

             <input style="width:294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="password" placeholder="请设置密码">

             <input style="width:294px;height:42px;border:1px solid #fff;" type="password" placeholder="请确认密码">

         </div>

         <input style="margin:20px 0 0 0;float:left;" type="checkbox"  id="registerAgree" checked="checked" >

         <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#999;">&nbsp;我已阅读并接受鹦鹉网</span>

         <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#069;" class="hover4">《服务协议》</span>

         <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#999;">和</span>

         <span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#069;" class="hover4">《账户协议》</span>

         <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>

       </div>

       <script>

       //注册弹出层

       function openRegister(){

          layer.open({

            type: 1,

            title: false,

            area : ['360px' , '400px'],

            closeBtn: 0,

            shadeClose: true,

            skin: 'yourclass',

            content: $('#registerlayer'),

          });

        }

          $(document).ready(function(){

          $("#registerAgree").click(function(){

          var check=document.getElementById("registerAgree");

          if(check.checked!=true){

           $("#register").css("background","#ccc");

           }

          else {

           $("#register").css("background","#6FAC22");

           }

          });

          });

       </script>

 </body>

html/css/js-layer弹出层的初次使用的更多相关文章

  1. layer弹出层

    最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...

  2. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  3. layer弹出层右上角的关闭按钮怎么没有显示

    问题描述:layer弹出层右上角的关闭按钮怎么没有显示,但鼠标移上去又可以点击 解决方式: 这是因为样式中需要一个图标,你的项目中缺少.解决如下:1.下载图标:http://www-x-zi-han- ...

  4. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  5. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  6. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  7. layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  8. Layer弹出层销毁问题

    Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...

  9. layer 弹出层 回调函数调用 弹出层页面 函数

    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

  10. layer 弹出层 不居中

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

随机推荐

  1. 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（一）

    梳理下使用spring+springMVC+mybatis 整合后的一个简单实例:输入用户的 ID,之后显示用户的信息(此次由于篇幅问题,会分几次进行说明,此次是工程的创建,逆向生成文件以及这个简单查 ...

  2. linux服务管理 服务管理

    系统的运行级别 运行级别 0 关机(不能设置) 1 单用户模式,类似windows的安全模式 2 不完全的命令行模式,不含NFS服务(文件共享的服务) 3 完全的命令行模式,就是标准字符界面 4 系统 ...

  3. dede织梦判断导航栏是否有子栏目

    以下代码判断导航栏是否含有子栏目 {dede:field name=typeid runphp="yes"} global $dsql; $sql , "; $row = ...

  4. 初始C#（二）

    一 数组 定义:能存放任意多个同类型数据 声明与赋值:声明:数据类型[ ]变量名                                        赋值:变量名=new 数据类型[长度] ...

  5. 阶段01Java基础day22IO流03

    22.01_IO流(序列流) 1.什么是序列流 序列流可以把多个字节输入流整合成一个, 从序列流中读取数据时, 将从被整合的第一个流开始读, 读完一个之后继续读第二个, 以此类推. 2.使用方式 整合 ...

  6. 史上最简单OpenGL+VS2017环境配置

    这里采用 最简单的方法: (1)添加Nuget包管理器(方便我们为项目添加OpenGL的库) (2)新建一个项目 右键我们的项目名 ——> 管理NuGet程序包——>搜索nupengl,然 ...

  7. C# 注册机功能开发，机器码设计

    前言 本文将使用一个NuGet公开的组件技术来实现机器码注册码功能开发,提供了一些简单的API,来方便的实现. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet ...

  8. 使用vue+koa实现一个简单的图书小程序（1）

    这个系列的博客用来记录我开发时候遇到的问题以及学习到的知识 边做边学: 前后端分离,高内聚低耦合小程序端使用了mpvue 内部使用了vuejs的语法 来做整个小程序的渲染层 后端使用的是koa2搭建一 ...

  9. Web.xml详解分析

    一.首先了解项目加载的优先级 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. 最终得出的结 ...

  10. C++学习（三十五）（C语言部分）之 单链表

    单链表 就好比火车 火车头-->链表头部火车尾-->链表尾部火车厢-->链表的节点火车厢连接的部分-->指针火车中的内容-->链表节点的的数据链表节点包含数据域和指针域数 ...