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 textarea自动增高并隐藏滚动条
Dec 16 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
js实现简单放大镜效果
Mar 07 Javascript
JS错误处理与调试操作实例分析
Apr 13 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Angularjs 事件指令详细整理
2017/07/27 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
python局部赋值的规则
2013/03/07 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python网络编程 Python套接字编程
2017/09/13 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python如何将多个PDF进行合并
2019/08/13 Python
python 伯努利分布详解
2020/02/25 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
高中生的学习总结自我鉴定
2013/10/26 职场文书
总裁岗位职责
2013/12/04 职场文书
建议书标准格式
2014/03/12 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python