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 相关文章推荐
一个基于jquery的文本框记数器
Sep 19 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php生成mysql的数据字典
2016/07/07 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python的正则表达式re模块的常用方法
2013/03/09 Python
python的urllib模块显示下载进度示例
2014/01/17 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
高中的自我鉴定
2013/12/16 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
民间借贷借条范本
2015/05/25 职场文书
开业典礼致辞
2015/07/29 职场文书