<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>layer-更懂你的web弹窗解决方案</title>

  <style>

  .none{display:none}

.x_Popup {

    width: 330px;

    height: 120px;

    padding: 10px;

}

.x_Popup p i{vertical-align: middle;}

/*demo-class是layer弹窗可以自定义的样式 通过skin来调用*/

  .demo-class .layui-layer-btn a.layui-layer-btn0{

    background: #279eb7;

    outline: none;

    border-color: #279eb7

  }

  .demo-class .layui-layer-title {

    padding: 0 80px 0 10px;

    color: #fff;

    background-color: #279eb7;

    font-size: 16px;

}

  </style>

  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>

  <script src="layer/layer.js"></script>

</head>

<body>

<button id="Sign_out">点击</button>

<div class="x_Popup Sign_out none">

  <p class="f16 tc pt30 c333"><i class="iconfont juse f30"></i> 您确定要退出么？</p>

</div>

<script>

    $('#Sign_out').on('click', function(){

       layer.open({

                  skin:'demo-class', //调用自定义样式

                  type: 1, //基本层类型

                  title:'提示',

                  closeBtn: 1,//关闭按钮

                  shift:0,//动画

                  shadeClose: true,//是否点击遮罩关闭

                  maxWidth:380,

                  content: ($(".Sign_out")),

                  btn:["确定","取消"]

                });

      });

    </script>

</body>

</html>

这是layer官网弹层所有参数链接地址：http://layer.layui.com/api.html#tips

layer弹层基本参数初尝试的更多相关文章

  1. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

  2. layer弹层插件

      // 使用前需要引入jquery的支持,链接如下:   https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js    ...

  3. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  4. Layer弹层组件 二次扩展，项目中直接使用。

    /************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...

  5. layer弹层

    获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可. 注意:引入layer.js前必须先引入jquery1. ...

  6. Layer弹层（父子传值，兄弟传值）

    需求:最外面列表界面点修改弹出LayerA界面,再点击LayerA界面中的选择地图坐标按钮弹出LayerB地图界面 这个过程涉及到的: 1:LayerA将坐标传给LayerB,LayerB在地图上显示 ...

  7. HTML5 本地存储+layer弹层组件制作记事本

    什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...

  8. layer弹层content写错导致div复制了一次，导致id失效 $().val() 获取不到dispaly:none div里表单的值

    ​ 错误之源: $("a.consult").click(function () {         lib_consult_html = $('#consult-html').h ...

  9. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

随机推荐

  1. Spark排序与去重遇见的问题

    答案: Spark的distinct是通过聚集去重的,可以简单理解为group by去重: 代码1:是先去重之后再排序取limit20是正确的, 代码2:是先排序之后再到各个节点进行去重之后再limi ...

  2. iptables snat 和dnat说明

    iptables中的snat和dnat是非常有用的,感觉他们二个比较特别,所以单独拿出来说一下. dnat是用来做目的网络地址转换的,就是重写包的目的IP地址.如果一个包被匹配了,那么和它属于同一个流 ...

  3. pytorch学习-AUTOGRAD: AUTOMATIC DIFFERENTIATION自动微分

    参考:https://pytorch.org/tutorials/beginner/blitz/autograd_tutorial.html#sphx-glr-beginner-blitz-autog ...

  4. python3 练习题 day04

    '''1.整理装饰器的形成过程,背诵装饰器的固定格式''''''开放封闭原则:为了保证程序的稳定性,和功能的可开放性,在不修改目标函数源代码和调用方式的情况下,对目标函数增加新功能'''# def w ...

  5. JUnit5 快速指南

    JUnit5 快速指南 version: junit5 1. 安装 2. JUnit 注解 3. 编写单元测试 3.1. 基本的单元测试类和方法 3.2. 定制测试类和方法的显示名称 3.3. 断言( ...

  6. 记录一次.Net框架Bug发现和提交过程：.Net Framework和.Net Core均受影响

    SmtpClient一处代码编写错误导致异步发送邮件时DeliveryFormat配置项无法正确工作,异步操作已经完全不受我们设置属性控制了,UTF-8内容(如中文)转不转码完全看对方邮件服务器心情! ...

  7. SkyWalking Liunx 环境搭建&NetCore接入

    背景 前两天看见有小哥介绍windows下安装skywalking的介绍地址在这. 正好最近也在搭建linux环境的SkyWalking,顺便把linux环境搭建的经验分享下,帮助下使用linux部署 ...

  8. IDEA报错Error:Module 'shop-common' production: java.lang.IndexOutOfBoundsException

    问题描述: 本来项目是正常的,编译.运行.启动都是OK的,但是在一次电脑重启后,出现了以上这个问题:Error:Module 'shop-common' production: java.lang.I ...

  9. IIS配置Url重写实现http自动跳转https的重定向方法(100%解决)

    引言 本文推荐阅读地址:https://www.52abp.com/BlogDetails/10008 这种文章网上可以说一搜一大把,但是我为什么还要写呢,因为一搜一把没把我气死,都是东抄西挪的东西, ...

  10. ASP.NET Core 和 ASP.NET Framework 共享 Identity 身份验证

    .NET Core 已经热了好一阵子,1.1版本发布后其可用性也越来越高,开源.组件化.跨平台.性能优秀.社区活跃等等标签再加上"微软爸爸"主推和大力支持,尽管现阶段对比.net ...