layer弹出层框架alert与msg的示例分析

发布时间：2021-08-17 13:47:17 阅读：113 作者：小新栏目：web开发

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

小编给大家分享一下layer弹出层框架alert与msg的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

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的示例分析

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 >内容<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'
    });
  }
});

以上是“layer弹出层框架alert与msg的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

layer弹出层框架alert与msg的示例分析

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签