layer弹出层框架alert与msg详解


Posted in Javascript onMarch 14, 2017

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。

layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

在贴出代码

layer.alert('见到你真的很高兴', {icon: 6});

这是一个最简单的弹出层,可根据icon配置左边的图标

通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作

如图:

layer弹出层框架alert与msg详解

layer.alert('墨绿风格,点击确认看深蓝', {
  skin: 'layui-layer-molv' //样式类名 自定义样式
  ,closeBtn: 1  // 是否显示关闭按钮
  ,anim: 1 //动画类型
  ,btn: ['重要','奇葩'] //按钮
  ,icon: 6  // icon
  ,yes:function(){
    layer.msg('按钮1')
  }
  ,btn2:function(){
    layer.msg('按钮2')
  }});

layer弹出层框架alert与msg详解

看下效果图1.

layer弹出层框架alert与msg详解

code:

layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {
   time: 2000, //2s后自动关闭
   btn: ['明白了', '知道了', '哦']
 });

回调的例子:

layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

code:

layer.msg('也可以这样', {
   btn: ['明白了', '知道了']
   ,yes: function(index, layero){
     layer.msg("按钮1回调,参数是:"+index)
   }
  ,btn2: function(index, layero){
     //按钮【按钮二】的回调
     layer.msg("按钮2回调,参数是:"+index)
     return false //开启该代码可禁止点击该按钮关闭
  }
});

open方式

layer弹出层框架alert与msg详解

code

layer.open({
  type: 1
  ,title: "open方式弹出层" //不显示标题栏  title : false/标题
  ,closeBtn: true
  ,area: '300px;'
  ,shade: 0.8
  ,id: 'LAY_layuipro' //设定一个id,防止重复弹出
  ,resize: false
  ,btn: ['火速围观', '残忍拒绝']
  ,btnAlign: 'c'
  ,moveType: 1 //拖拽模式,0或者1
  ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
  ,success: function(layero){
     var btn = layero.find('.layui-layer-btn');
      btn.find('.layui-layer-btn0').attr({
         href: 'http://www.layui.com/'
      ,target: '_blank'
    });
  }
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
Javascript 继承实现例子
Aug 12 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
angularJS 中input示例分享
Feb 09 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 #Javascript
利用js定义一个导航条菜单
Mar 14 #Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 #Javascript
使用BootStrap实现标签切换原理解析
Mar 14 #Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 #Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 #Javascript
AngularJS实现页面定时刷新
Mar 14 #Javascript
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php支付宝APP支付功能
2020/07/29 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python中字符串List按照长度排序
2019/07/01 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python实现坦克大战
2020/04/24 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
销售总监工作职责
2013/11/21 职场文书
门卫岗位安全职责
2013/12/13 职场文书
高一学生期末评语
2014/04/25 职场文书
运动会1000米加油稿
2015/07/21 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python