layui里的弹出框问题

来源:互联网 发布:c语言取反加一 编辑:程序博客网 时间:2024/06/05 19:07

首先引入对应的包,

下面这种是一种方式

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,

<div id="tongjiLay" ></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属性,所以大家知道怎么用了吧

0 0