layui里的弹出框问题

最新推荐文章于 2025-04-23 11:15:02 发布

原创最新推荐文章于 2025-04-23 11:15:02 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端

本文介绍了layui框架中弹出框的使用方法，包括两种设置content的方式：一种是引用页面内预定义的div，另一种是直接传入HTML字符串。同时提到了弹出框的zIndex属性，类比于CSS的z-index，用于控制弹出框的层级显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入对应的包，

下面这种是一种方式

layui.use('layer',
function() { 
    var $ = layui.jquery,
    layer = layui.layer; //独立版的layer无需执行这一句
    var othis = $(this);
    //触发事件
    var type = othis.data('type'),
    text = othis.text();
    layer.open({
        title: '统计详情',
        type: 1,
        zIndex: 122000,
        area: [width + 'px', height + 'px'],
        offset: type ,
        id: 'tongjiLay' + type //防止重复弹出
        ,
        content: $('#tongjiLay'),
        btnAlign: 'c' //按钮居中
        ,
        btn: ['保存', '关闭'],
        cancel: function(index, layero) {
            layer.closeAll();
            $("#tongjiLay").hide();
            $("#fxtjTableDetail").hide();    
        },
        yes: function(index, layero) {
            layer.closeAll();
            $("#tongjiLay").hide();
            $("#fxtjTableDetail").hide();
        },
        btn2: function(index, layero) {
            layer.closeAll();
            $("#tongjiLay").hide();
            $("#fxtjTableDetail").hide();
        },
        offset: ['140px', '330px'],
        shade: 0 
    });
});

其中，content里的值是在页面写了一个对应的div，

你也可以这样写：

layui.use('layer',
function() {  
    var $ = layui.jquery,
    layer = layui.layer; //独立版的layer无需执行这一句
    var othis = $(this);  //触发事件
       
    var type = othis.data('type'),
     text = othis.text();   layer.open({   title: '详情'    ,
        type: 1    ,
        area: ['340px', height + 'px']    ,
        offset: type     ,
        id: 'chaxunLay' + type //防止重复弹出
            ,
        content: tr   ,
        btnAlign: 'c' //按钮居中
            ,
        btn: ['关闭', '保存'],
        offset: ['140px', '330px']    ,
        shade: 0     ,
        yes: function() {     layer.closeAll();    
        }   
    });
});

这里的content的值就可以是你传入的一个字符窜，可以类似"<table><tr></tr></table>",

要提醒一句是的是，弹出框的zIndex属性类似于css里的z-index属性，所以大家知道怎么用了吧