layer.open的常用参数例子

简介: layer.open的常用参数例子
layer.open({
    // 基本层类型:0(信息框,默认)1(页面层)2(iframe层,也就是解析content)3(加载层)4(tips层)
    type: 1,
    title: "标题",
    // 当type: 2时就是url
    content: "内容/url",
    // 宽高:如果是100%就是满屏
    area: ['733px', '450px'],
    // 坐标:auto(默认坐标,即垂直水平居中),具体当文档:https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按钮:按钮1的回调是yes(也可以是btn1),而从按钮2开始,则回调为btn2: function(){},以此类推
    btn: ['按钮1', '按钮2'],
    // 关闭按钮:layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则0
    closeBtn: 1,
    // 遮罩:默认:0.3透明度的黑色背景('#000')
    shade: 0.3,
    // 是否点击遮罩关闭:默认:false
    shadeClose: false,
    // 自动关闭所需毫秒:默认:0不会自动关闭
    time: 0,
    // 最大最小化:默认:false
    maxmin: false,
    // 固定:默认:true
    fixed: true,
    // 是否允许拉伸:默认:true
    resize: true,
    // 层叠顺序:默认:19891014,一般用于解决和其它组件的层叠冲突
    zIndex: 19891014,
    // 层弹出后的成功回调方法:layero前层DOM,index当前层索引
    success: function(layero, index){
    },
    // 第一个按钮事件,也可以叫btn1
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    // 右上角关闭按钮触发的回调:默认会自动触发关闭。如果不想关闭,return false即可
    cancel: function(index, layero){
        if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
            layer.close(index);
        }
        return false;
    },
    // 层销毁后触发的回调:无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
    end: function(){
    },
    // 最大化后触发的回调:携带一个参数,即当前层DOM
    full: function(layero){
    },
    // 最小化后触发的回调:携带一个参数,即当前层DOM
    min: function(layero){
    },
    // 还原后触发的回调:携带一个参数,即当前层DOM
    restore: function(layero){
    },
});
layer.open({
    type: 1,
    title: "标题",
    content: "内容/url",
    area: ['733px', '450px'],
    offset: 'auto',
    btn: ['按钮1', '按钮2'],
    closeBtn: 1,
    shade: 0.3,
    shadeClose: false,
    time: 0,
    maxmin: false,
    fixed: true,
    resize: true
    zIndex: 19891014,
    success: function(layero, index){
    },
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    cancel: function(index, layero){
            layer.close(index);
        }
        return false;
    },
    end: function(){
    },
    full: function(layero){
    },
    min: function(layero){
    },
    restore: function(layero){
    },
});
相关文章
|
JavaScript
Layui 内置方法 - layer.getChildFrame( 获取iframe页的DOM)
Layui 内置方法 - layer.getChildFrame( 获取iframe页的DOM)
748 0
|
JavaScript 前端开发
Layui 弹层组件 - 基础参数1
Layui 弹层组件 - 基础参数1
199 0
|
JavaScript
若依代码生成自带导入功能
若依代码生成自带导入功能
1011 0
|
9月前
|
供应链 安全 JavaScript
开源社区漏洞治理策略与实践
本次分享的主题是开源社区漏洞治理策略与实践,由安势信息的高坤分享。主要分为四个部分: 1. 为什么要重视软件供应链安全时变量池分享 2. 我们可借鉴的国外优秀探索 3. SBOM的挑战 4. 安势的探索及成果
198 2
|
12月前
ThreeJs使用tweenjs动画库制作动画
这篇文章介绍了如何在Three.js中使用Tween.js动画库来简化动画制作流程,并演示了如何通过简单的代码实现动画效果。
324 1
ThreeJs使用tweenjs动画库制作动画
|
开发框架 前端开发 JavaScript
网页CAD中二维CAD图转三维CAD的方法
本文介绍了一种将网页CAD中的二维图纸转换成三维模型的方法,特别聚焦于通过拉伸平面图形至一定高度来实现三维效果。文中利用了mxcad和mxcad3d两个框架,前者负责读取和解析二维CAD图纸,后者则基于这些数据构建三维模型。文章详细阐述了安装配置步骤及代码实现细节,包括创建项目、安装依赖、编写HTML与JavaScript代码等,并提供了完整的示例代码。最终实现了从二维图纸自动转换并展示三维模型的功能,同时添加了交互元素以方便用户操作。
网页CAD中二维CAD图转三维CAD的方法
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
652 0
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
566 1