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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 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
我的论坛源代码(二)
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP积分兑换接口实例
2015/02/09 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
django批量导入xml数据
2016/10/16 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
应届生财务会计求职信
2013/11/05 职场文书
大四学生思想汇报
2014/01/13 职场文书
2014年元旦活动方案
2014/02/15 职场文书
幼儿园课题方案
2014/06/09 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
使用CSS设置滚动条样式
2022/01/18 HTML / CSS