layer 弹出框

简介: layer 弹出框


  • 提示框
// 简单提示
layer.msg("保存成功!");
// 带回调函数提示框
layer.msg("保存成功",{
    icon:1       // icon:1 绿对号 icon:2 红叉号 icon:3黄问号 icon:4 灰色锁 icon:5 红哭脸 icon:6 绿笑脸 icon:7 黄叹号
},function(){
    //回调函数
});
layer.msg('保存成功',{
            offset:['50%'],
            time: 2000 //2秒关闭,默认是3秒
           },function(){
               reload();
           }
);
  • tip提示框
layer.tips("输入框不能为空",'#user_name_id',{
    time:2500
});
layer.tips("输入框不能为空",'input[name=user_name]',{
    time:2500
});
  • 窗口
/*
 * 如果是页面层
 */
layer.open({
  type: 1,
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
layer.open({
  content: $('#id').html(),
  success: function(layero, index){
    console.log(layero, index);
    console.log(layero.selector);
  }
});
  • 设置多个按钮
//eg1
 layer.confirm('纳尼?', {
     btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
     ,btn3: function(index, layero){
         //按钮【按钮三】的回调
     }
}, function(index, layero){
 //按钮【按钮一】的回调
 }, function(index){
     //按钮【按钮二】的回调
 })


相关文章
|
前端开发 定位技术
layer弹框右上角关闭按钮的样式
layer弹框右上角关闭按钮的样式
231 0
Layui 内置方法 - layer.confirm(询问框)
Layui 内置方法 - layer.confirm(询问框)
946 0
Layui 内置方法 - layer.msg(提示框)
Layui 内置方法 - layer.msg(提示框)
632 0
|
2月前
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
layer弹框在实际项目中的一些应用
layer弹框在实际项目中的一些应用
67 0
layer 父弹出框上弹出子弹框窗体大小问题
layer 父弹出框上弹出子弹框窗体大小问题
Layui 内置方法 - layer.setTop(置顶当前窗口)
Layui 内置方法 - layer.setTop(置顶当前窗口)
218 0
|
JavaScript
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
850 0