开发公司layer.open（常用）

实例：

layer.open({
        type: 1,
        title: '标题',
        skin: 'layui-layer-rim', //加上边框
        area: ['1070px', '550px'], //设置宽高
        content:$("#lookinfo"),
        btn: ['按钮1','按钮2'],
        btn1:function(index, layero){
            // 按钮1的逻辑
        },
        btn2:function(index, layero){
            // 按钮2的逻辑
        },
        cancel: function(){
            // 开发公司右上角关闭事件的逻辑
        }
    });

------------------------------------------------常用情景------------------------------------------------------

1.点击“按钮”开发公司仅关闭弹窗，不刷新 ，可使用layer.close(index);

layer.open({
            type: 1,
            title: '查看',
            closeBtn: 1, 
            anim: 2,
            shadeClose: true, 
            area:  ['540px', '750px'],
            content: $("#lookinfo"),
            btn: ["确定","取消"],
            yes: function(index, layero){
                layer.close(index);
            },
            cancel: function(index, layero){
                layer.close(index);
            },
        });

------------------------------------------------详细说明------------------------------------------------------

type -- 开发公司基本层类型

类型：Number，默认：0

0（信息框，默认）1（页面层）2（层）3（加载层）4（tips层）

title -- 标题

类型：String/Array/Boolean，默认：'信息'

title开发公司支持三种类型的值：

1、开发公司若你传入的是普通的字符串，如title :'我是标题'，开发公司那么只会改变标题文本；

2、开发公司若你还需要自定义标题区域样式，开发公司那么你可以title: ['文本', 'font-size:18px;']，开发公司数组第二项可以写任意css样式；

3、开发公司如果你不想显示标题栏，你可以title: false

skin -- 样式类名

类型：String，默认：''

skin允许传入layer开发公司内置的样式class名

skin开发公司允许传入自定义的class名，可以借助skin开发公司轻松完成不同的风格定制

目前layer内置的skin有：layui-layer-lanlayui-layer-molv，

开发公司推荐自己来定义：（如下）

  1. //单个使用
  2. layer.open({
  3.   skin: 'demo-class'
  4. });
  5. //全局使用。开发公司即所有弹出层都默认采用，开发公司但是单个配置skin开发公司的优先级更高
  6. layer.config({
  7.   skin: 'demo-class'
  8. })
  9. //CSS 
  10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  12. body .demo-class .layui-layer-btn a{background:#333;}
  13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
  14. …
  15. 加上body开发公司是为了保证优先级。开发公司你可以借助Chrome调试工具，定义更多样式控制层更多的区域。

 - 内容

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的

可以是普通的html内容

可以指定DOM

可以随着type的不同而不同（如下）

  1. /!*
  2.  如果是页面层
  3.  */
  4. layer.open({
  5.   type: 1, 
  6.   content: '传入任意的文本或html' //这里content是一个普通的String
  7. });
  8. layer.open({
  9.   type: 1,
  10.   content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
  11. });
  12. //Ajax获取
  13. $.post('url', {}, function(str){
  14.   layer.open({
  15.     type: 1,
  16.     content: str //注意，如果str是object，那么需要字符拼接。
  17.   });
  18. });
  19. /!*
  20.  如果是iframe层
  21.  */
  22. layer.open({
  23.   type: 2, 
  24.   content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
  25. }); 
  26. /!*
  27.  如果是用layer.open执行tips层
  28.  */
  29. layer.open({
  30.   type: 4,
  31.   content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
  32. });

 - 宽高

类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的

若要定义宽度：area: '500px'，高度仍然是自适应的

若要定义宽高：area: ['500px', '300px']

 - 按钮

类型：String/Array，默认：'确认'

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。

若需自定义一个按钮时，btn: "我知道了'"

若需自定义两个按钮时，btn: ['yes', 'no']

若需自定义更多按钮，btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。(如下)

  1. //eg1       
  2. layer.confirm('纳尼？', {
  3.   btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  4.   ,btn3: function(index, layero){
  5.     //按钮【按钮三】的回调
  6.   }
  7. }, function(index, layero){
  8.   //按钮【按钮一】的回调
  9. }, function(index){
  10.   //按钮【按钮二】的回调
  11. });
  12.  
  13. //eg2
  14. layer.open({
  15.   content: 'test'
  16.   ,btn: ['按钮一', '按钮二', '按钮三']
  17.   ,yes: function(index, layero){
  18.     //按钮【按钮一】的回调
  19.   }
  20.   ,btn2: function(index, layero){
  21.     //按钮【按钮二】的回调
  22.     
  23.     //return false 开启该代码可禁止点击该按钮关闭
  24.   }
  25.   ,btn3: function(index, layero){
  26.     //按钮【按钮三】的回调
  27.     
  28.     //return false 开启该代码可禁止点击该按钮关闭
  29.   }
  30.   ,cancel: function(){ 
  31.     //右上角关闭回调
  32.     
  33.     //return false 开启该代码可禁止点击该按钮关闭
  34.   }
  35. });

 - 坐标

类型：String/Array，默认：

offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

值备注
offset: 'auto'默认坐标，即垂直水平居中
offset: '100px'只定义top坐标，水平保持居中
offset: ['100px', '50px']同时定义top、left坐标
offset: 't'快捷设置顶部坐标
offset: 'r'快捷设置右边缘坐标
offset: 'b'快捷设置底部坐标
offset: 'l'快捷设置左边缘坐标
offset: 'lt'快捷设置左上角
offset: 'lb'快捷设置左下角
offset: 'rt'快捷设置右上角
offset: 'rb'快捷设置右下角

 - 图标

信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标

若需显示图标时，默认皮肤可以传入0-6

若是加载层，可以传入0-2

  1. //eg1
  2. layer.alert('酷毙了', {icon: 1});
  3. //eg2
  4. layer.msg('不开心。。', {icon: 5});
  5. //eg3
  6. layer.load(1); //风格1的加载

 - 按钮排列

类型：String，默认：r

该参数可支持的赋值：

值备注
btnAlign: 'l'按钮左对齐
btnAlign: 'c'按钮居中对齐
btnAlign: 'r'按钮右对齐。默认值，不用设置

 - 关闭按钮

类型：String/Boolean，默认：1

layer提供了两种风格的关闭按钮，可通过配置1和2来展示

若需不显示，则closeBtn: 0

 - 遮罩

类型：String/Array/Boolean，默认：0.3

即弹层外区域

默认是0.3透明度的黑色背景（'#000'）

若需定义别的颜色，shade: [0.8, '#393D49']；

若需不显示遮罩，可以shade: 0

 - 是否点击遮罩关闭

类型：Boolean，默认：false

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

 - 自动关闭所需毫秒

类型：Number，默认：0

默认不会自动关闭。

若需自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

 - 层弹出后的成功回调方法

类型：Function，默认：null

若需在层创建完毕时即执行一些语句，可以通过该回调。

success会携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero）

  1. layer.open({
  2.     content: '测试回调',
  3.     success: function(layero, index){
  4.         console.log(layero, index);
  5.     }
  6. });

 - 确定按钮回调方法

类型：Function，默认：null

该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero）

  1. layer.open({
  2.     content: '测试回调',
  3.     yes: function(index, layero){
  4.         //do something
  5.         layer.close(index); //如果设定了yes回调，需进行手工关闭
  6.     }
  7. });

 - 右上角关闭按钮触发的回调

类型：Function，默认：null

该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero）

默认会自动触发关闭

如果不想关闭，return false即可

  1. cancel: function(index, layero){
  2.     if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
  3.         layer.close(index)
  4.     }
  5.     return false;
  6. }

 - 层销毁后触发的回调

类型：Function，默认：null

无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。

 -分别代表最大化、最小化、还原 后触发的回调

类型：Function，默认：null

携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero）

  1. min: function(layero, index){ 
  2.     //index 参数为 layui 2.6.6 或独立版 layer 3.5.0 开始新增
  3.     //当层最小化时触发
  4.  
  5.     //自定义操作，并阻止默认最小化
  6.     //layer.min(index); //单独执行最小化
  7.     //return false; //阻止默认最小化
  8. }

 - 用于控制弹层唯一标识

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

查看更多：

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发