转载地址:http://blog.csdn.net/beauxie/article/details/60959971

本文搜集的是本人在实际开发中所用到的layer窗口,未用到的layer按钮,请参考layer官网:http://layer.layui.com/

一、layer的icon样式

以上样式测试代码:

  1. layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){
  2. //do something
  3. alert("确认");
  4. layer.close(index);
  5. });

二、询问框

官方案例:

  1. //询问框
  2. layer.confirm('您是如何看待前端开发?', {
  3. btn: ['重要','奇葩'] //按钮
  4. }, function(){
  5. layer.msg('的确很重要', {icon: 1});
  6. }, function(){
  7. layer.msg('也可以这样', {
  8. time: 20000, //20s后自动关闭
  9. btn: ['明白了', '知道了']
  10. });
  11. });

本人所用到,需要修改标题,正如以上测试样式时的代码一样,实现自定义标题:

  1. var message = "确定继续?";
  2. //询问框
  3. layer.confirm(message, {icon: 3, title:'信息提示'}, function(index){
  4. //submitForm();
  5. layer.close(index);
  6. });

三、提示层

官方案例:

  1. //提示层
  2. layer.msg('玩命提示中');

默认关闭时间是3秒,效果如下(背景是官网的广告,实际效果是黑色半透明):

自定义样式以及时间,代码如下:

  1. layer.msg('操作成功!', {icon: 6, time: 2000});

icon样式是6,关闭时间为2秒。效果如下:

四、弹框(自定义页)

官方案例:

  1. //自定页
  2. layer.open({
  3. type: 1,
  4. skin: 'layui-layer-demo', //样式类名
  5. closeBtn: 0, //不显示关闭按钮
  6. anim: 2,
  7. shadeClose: true, //开启遮罩关闭
  8. content: '内容'
  9. });

效果如下:

本人使用案例,使用layer实现弹框登录:

  1. layer.open({
  2. type: 2,
  3. title: '用户登录',
  4. maxmin: true,
  5. skin: 'layui-layer-lan',
  6. shadeClose: true, //点击遮罩关闭层
  7. area : ['400px' , '280px'],
  8. content:'login.html'//弹框显示的url,对应的页面
  9. });

其中‘login.html’是登录页面,其效果如下:

弹框登录案例,请参考本人另外一篇博客:使用layer实现登录弹框,登录成功以后关闭弹框并调用父窗口方法

转 layer的Icon样式以及一些常用的layer窗口使用的更多相关文章

  1. layer icon样式及 一些弹框使用方法

    一.layer的icon样式 以上样式测试代码: layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do someth ...

  2. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  3. CSS样式有哪些常用的属性?

    一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...

  4. 常用的layer弹出层

    本文来自 松耦合 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/dunegao/article/details/78978448?utm_source=copy 常用 ...

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

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

  6. layer.open参数;layer.open关闭事件;layer.open关闭刷新;layer.open获取子页的值;layer.open调用子页面的方法

    父页面 function layerOpen() { layer.open({ type: 2, shade: [0], title: "验收申请", area: ['1024px ...

  7. PLSQL常用配置之窗口/版面保存、SQL格式化/美化、SQL注释\去掉注释等快捷键配置、登陆历史修改配置

    http://blog.csdn.net/hyeidolon/article/details/8251791   PLSQL常用配置之窗口/版面保存.SQL格式化/美化.SQL注释\去掉注释等快捷键配 ...

  8. CSS样式表之常用文本属性

    断更了两周了,因为纠结之后在学java啦,但是还是要把学过的前端知识更完 以下的一些文本属性是CSS最常用的属性: [长度单位]:px(像素) [颜色单位]: 十六进制:#ffffff 分别对应红绿蓝 ...

  9. javascript控制样式表(不常用)

    <html> <head> <title>Example XHTML page</title> <link href="css1.css ...

随机推荐

  1. C# 安装WindowsService时弹出设置服务登录窗口的解决方案

    使用SignalR实现消息推送,页面实时刷新,使用WindowsService作为SignalR的宿主,也就是作为一个消息服务器,在使用cmd命令安装的时候弹出设置服务登录的窗口,解决此问题的具体操作 ...

  2. Linux磁盘及文件系统管理3

    文件系统管理工具: 创建文件系统的工具 mkfs mkfs.ext2,mkfs.ext3,mkfs.ext4,mkfs.xfs,mkfs.vfat,... 检测及修复文件系统的工具 fsck fsck ...

  3. Jmeter官方插件实现Dubbo接口测试

    目前主流的分布式框架有Dubbo和SpringCloud, SpringCloud是基于Http协议的分布式框架,Dubbo是基于RPC的分布式框架,Jmeter没有内置对Dubbo接口的支持,很难直 ...

  4. YOLO---Darknet下的学习笔记

    YOLO.V3-Darknet下的学习笔记 @wp20180927 [目录] 一. 安装Darknet(仅CPU下) 2 1.1在CPU下安装Darknet方式 2 1.2在GPU下安装Darknet ...

  5. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  6. 基于VS2013的MFC窗体按钮事件触发案例(亲测可用)

    学过python的小朋友们一定对python freeze命令不陌生,这一命令用于导出python安装模块,用于新电脑可以快速的配置安装所需的模块,以便快速的加入项目. 那么我们大可以用 window ...

  7. CF311B Cats Transport(斜率优化)

    题目描述 Zxr960115 是一个大农场主.他养了m只可爱的猫子,雇佣了p个铲屎官.这里有一条又直又长的道路穿过了农场,有n个山丘坐落在道路周围,编号自左往右从1到n.山丘i与山丘i-1的距离是Di ...

  8. 牛客练习赛3 贝伦卡斯泰露——队列&&爆搜

    题目 链接 题意:给出一个长度为 $n$ 的数列 $A_i$,问是否能将这个数列分解为两个长度为n/2的子序列,满足: 两个子序列不互相重叠(是值不能有共同元素,但位置可以交错). 两个子序列中的数要 ...

  9. 洛谷P1140 相似基因【线性dp】

    题目:https://www.luogu.org/problemnew/show/P1140 题意: 给定两串基因串(只包含ATCG),在其中插入任意个‘-’使得他们匹配.(所以一共是5种字符) 这5 ...

  10. Codeforces Round #590 (Div. 3) C. Pipes

    链接: https://codeforces.com/contest/1234/problem/C 题意: You are given a system of pipes. It consists o ...