<!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. 史上最简单的springboot国际化多语言切换实现方案

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 前提: 在resources目录下建立 messages_en_US.properti ...

  2. 爬取伯乐在线文章（五）itemloader

    ItemLoader 在我们执行scrapy爬取字段中,会有大量的CSS或是Xpath代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制. 导入 ...

  3. hyperledge环境安装

    1.安装环境 1)本机安装 前提是已经安装好了docker\docker-compose\go,相应的内容可见 docker-1-环境安装及例子实践 docker官方文档学习-1-Docker for ...

  4. MSYS2 简单配置

    Windows 下用 SWIG 打包 C/C++ 为 Python 接口的时候,需要用到 32-bit/64-bit 编译器,MSYS2 给出了个一揽子方案,安装见其官方网站. 本文主要记录 MSYS ...

  5. 初学Python——集合及其运算

    一.集合定义及其功能 集合是一个无序的.不重复的数据组合,和字典列表一样也是一种数据类型. 集合两个最主要的功能:①去重(把一个列表变成集合,就自动去重了) ②关系测试(测试两组数据之间的交.并.差集 ...

  6. 随机产生1-12的整数 ， 根据产生整数输出一下该月份的季节信息（Math.random()和if语句的应用）

    package com.summer.cn; /** * @author Summer *随机产生1-12的整数 , 根据产生整数输出一下该月份的季节信息 */ public class Test04 ...

  7. Spark笔记-gz压缩存储到HDFS【转】

    参考:http://blog.csdn.net/u010454030/article/details/69291663 mergedRDD.saveAsTextFile(outputPath, cla ...

  8. 【PHP快速入门】 第二节 php基本语法

    1.什么地方能写PHP代码? php代码需要写在php标识符内,就是这个东西: 在我们编写一个php程序时,必须要在这个文件里面写上 2.PHP语句要不要加分号? 有的地方要加,有的地方不要加.(似乎 ...

  9. MySQL root密码忘记，原来还有更优雅的解法！

    一直以来,对于MySQL root密码的忘记,以为只有一种解法-skip-grant-tables. 问了下群里的大咖,第一反应也是skip-grant-tables.通过搜索引擎简单搜索了下,无论是 ...

  10. RabbitMQ 3.6.1 升级至 3.7.9 版本(Windows 升级至Centos)

    随着公司业务量的增加,原本部署在Windows服务器的RabbitMQ集群(3.6.1)总是出现莫名其妙的问题,经查询官方Issue,确认是RabbitMQ 3.6.1 版本的bug.查看从3.6.1 ...