layer弹出层框架alert与msg详解
2018-03-21 14:15
323 查看
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。
在贴出代码 1 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 如图:
看下效果图1.
code:
code:
open方式
code
c494
在贴出代码 1 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 如图:
1 layer.alert('墨绿风格,点击确认看深蓝', { 2 skin: 'layui-layer-molv' //样式类名 自定义样式 3 ,closeBtn: 1 // 是否显示关闭按钮 4 ,anim: 1 //动画类型 5 ,btn: ['重要','奇葩'] //按钮 6 4000 ,icon: 6 // icon 7 ,yes:function(){ 8 layer.msg('按钮1') 9 } 10 ,btn2:function(){ 11 layer.msg('按钮2') 12 }}); 13
看下效果图1.
code:
1 layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', { 2 time: 2000, //2s后自动关闭 3 btn: ['明白了', '知道了', '哦'] 4 });回调的例子:
code:
1 layer.msg('也可以这样', { 2 btn: ['明白了', '知道了'] 3 ,yes: function(index, layero){ 4 layer.msg("按钮1回调,参数是:"+index) 5 } 6 ,btn2: function(index, layero){ 7 //按钮【按钮二】的回调 8 layer.msg("按钮2回调,参数是:"+index) 9 return false //开启该代码可禁止点击该按钮关闭 10 } 11 });
open方式
code
1 layer.open({ 2 type: 1 3 ,title: "open方式弹出层" //不显示标题栏 title : false/标题 4 ,closeBtn: true 5 ,area: '300px;' 6 ,shade: 0.8 7 ,id: 'LAY_layuipro' //设定一个id,防止重复弹出 8 ,resize: false 9 ,btn: ['火速围观', '残忍拒绝'] 10 ,btnAlign: 'c' 11 ,moveType: 1 //拖拽模式,0或者1 12 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>' 13 ,success: function(layero){ 14 var btn = layero.find('.layui-layer-btn'); 15 btn.find('.layui-layer-btn0').attr({ 16 href: 'http://www.layui.com/' 17 ,target: '_blank' 18 }); 19 } 20 });
c494
相关文章推荐
- layer弹出层框架alert与msg详解
- layer弹出层框架alert与msg详解
- 使用layer的alert函数完成根据post请求结果弹出一个提示,然后刷新本页面
- 前端框架layer ios不支持弹出页面滚动条
- 非常好的web弹出层框架 -- layer
- 前端弹出层框架layer
- jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭弹出层
- 弹出层框架layer快速使用
- 非常好的web弹出层框架 -- layer
- jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭弹出层
- YII框架中使用layer弹出层,注册js文件
- 前端架构——弹出层框架layer
- layer弹出层 iframe层去掉滚动条
- [小技术应用]框架下动态调用用户控件的模态弹出窗体
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- AlertDialog editview不能弹出输入法
- Android控件之AlertDialog-单选、多选信息列表弹出框
- layer 弹出层
- 我的response.write("<script>alert('成功')</script>")总是显示在页面上端,而不是以弹出框的形式显示?
- 为什么layer中弹出层内容点击事件不起作用