转载地址: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. ELK 错误: retrying failed action with response code: 403, kibana无log显示

    今天10点时候同事报出kibana突然不显示log了,开始紧急排查 1. 从数据源头查起,先看被filebeat监视的log文件是否在更新(一般只要log对应服务在正常运行,log文件中就会有数据持续 ...

  2. Django项目实战—用户头像上传

    1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. 04_ Flume采集文件到HDFS案例

    采集需求:比如业务系统使用log4j生成的日志,日志内容不断增加,需要把追加到日志文件中的数据实时采集到hdfs 根据需求,首先定义以下3大要素 采集源,即source——监控文件内容更新 :  ex ...

  4. Python怎么检验数据的正态分布

    在对数据建模前,很多时候我们需要对数据做正态性检验,进而通过检验结果确定下一步的分析方案.下面介绍 Python 中常用的几种正态性检验方法: scipy.stats.kstest kstest 是一 ...

  5. LoadRunner(5)

    一.在线综合场景测试:号称能更真实模拟实际生产环境 又称为:混合交易测试 (交易就是事务 Transaction) 1.三要素: 1)多用户:根据需求指定VU数 压力的来源 2)多任务:根据需求结合多 ...

  6. FasterRunner (httptunner+django)搭建以及小功能补充

    配置 下载地址https://github.com/httprunner/FasterRunner 后端配置https://www.jianshu.com/p/e26ccc21ddf2 前端配置htt ...

  7. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  8. Visual Studio 查看宏展开

    使用Visual Studio 开发c++项目,中遇到项目中宏定义套宏定义,难以阅读源代码的时候. 可在 项目-->右键-->配置属性-->c/c++ -->预处理器 --&g ...

  9. POI读取格式化后的单元格数据

    public static String getFormattedValue(Cell cell) { FormulaEvaluator evaluator = cell.getSheet().get ...

  10. Mac中iterm2显示彩色

    Mac中iterm2显示彩色 2016年08月23日 18:09:37 Sun7_She 阅读数:1974   参考网址:https://segmentfault.com/q/101000000065 ...