动态生成layer.open弹出层详细使用案例

很多页面会使用到弹出层，动态生成，我结合自己的使用来讲个案例吧

具体展现的页面如下

这个是个审核查询页面，会动态生成数据，单击id后会出现一个弹窗


这是弹窗页面



下面是代码

单击的代码

<li style="width: 90px;"><button type="button" class="btn_search" onclick="shsearch()">查询</button></li>

function的代码，记得单击事件的danji(this)一定要加上this不然后面的会取不到id值，因为id是动态生成的，无法用getbyid去取，最后append的话拼接到id为sh的tbody标签上
function shsearch() {
$("#sh").empty();
var bixuan = document.getElementById("bixuan").value;
var acceptance_group = document.getElementById("j1").value;
var handle_person = document.getElementById("j2").value;
var operator_person = document.getElementById("operator_person").value;
$.ajax({
url: "/event/findExamineEveN.do",
type: "post",
dataType: "json",
async:false,
data: {
"acceptance_group": acceptance_group,
"handle_person": handle_person,
"operator_person": operator_person
},
success: function (result) {
var data = result.data;
for (var i = 0; i < data.length; i++) {
var id = data[i].eventId;
var trs = '';
trs += '<tr>';
trs += '<td><a id="'+data[i].eventId+'" href="#" class="gys_xinxi" onclick="danji(this)">'+data[i].eventId+'</a></td>' ; //
trs += '<td>' + data[i].title + '</td>';
trs += '<td>' + data[i].event_type + '</td>'; //
trs += '<td>' + data[i].submit_time + '</td>'; //
trs += '<td>' + data[i].accept_group + '</td>';
trs += '<td>' + data[i].operator_person + '</td>';
trs += '<td>' + data[i].state + '</td>';
trs += '<td><a type="button" class="btn btn-info Order_form"href="询价订单详细.html" title="询价订单详细">不通过</a> <a type="button"class="btn btn-warning cx_Inquiry">通过</a></td>';
trs += '</tr>';
$("#sh").append(trs);
}
}

然后是页面一个简单的弹出层弹出页面的框体代码，这个div是用来给append定位的，因为你拼接的弹出层得有个具体页面，一定要放在页面的最后面，而且要是none不显示的



<div class="" id="Supplier_Info" style="display: none"></div>

最后就是弹出层的代码了
function danji(obj){
var id=$(obj).attr("id");
$.ajax({
url: "/event/findExamineEveN.do",
type: "post",
dataType: "json",
data: {
"eventId":id
},
success: function (result) {
var data = result.data;
var trs='';
trs += '<div class="page-content">';
trs += '<div class="supplier_style">';
trs += '<div class="info_Content">';
trs += '<ul class="Content_list clearfix">';
trs += '<li><label class="label_name">ID</label><span>'+data[0].eventId+'</span></li>';
trs += '<li><label class="label_name">用户姓名</label><span>'+data[0].customer_name+'</span></li>';
trs += '<li><label class="label_name">用户部门</label><span>'+data[0].customer_depar+'</span></li>';
trs += '<li><label class="label_name">用户电话</label><span>'+data[0].customer_tel+'</span></li>';
trs += '<li><label class="label_name">用户职位</label><span>'+data[0].customer_position+'</span></li>';
trs += '<li><label class="label_name">办公地址</label><span>'+data[0].customer_place+'</span></li>';
trs += '<li><label class="label_name">标题</label><span>'+data[0].title+'</span></li>';
trs += '<li><label class="label_name">详细描述</label><span>'+data[0].detailed_description+'</span></li>';
trs += '<li><label class="label_name">事件来源</label><span>'+data[0].event_source+'</span></li>';
trs += '<li><label class="label_name">事件类型</label><span>'+data[0].event_type+'</span></li>';
trs += '<li><label class="label_name">事件分类层1</label><span>'+data[0].event_layer1+'</span></li>';
trs += '<li><label class="label_name">事件分类层2</label><span>'+data[0].event_layer2+'</span></li>';
trs += '<li><label class="label_name">事件分类层3</label><span>'+data[0].event_layer3+'</span></li>';
trs += '<li><label class="label_name">严重程度</label><span>'+data[0].severity+'</span></li>';
trs += '<li><label class="label_name">服务对象</label><span>'+data[0].service_object+'</span></li>';
trs += '<li><label class="label_name">优先级</label><span>'+data[0].priority+'</span></li>';
trs += '<li><label class="label_name">接受组</label><span>'+data[0].accept_group+'</span></li>';
trs += '<li><label class="label_name">处理人</label><span>'+data[0].handle_person+'</span></li>';
trs += '<li><label class="label_name">状态</label><span>'+data[0].state+'</span></li>';
trs += '<li><label class="label_name">状态理由</label><span>'+data[0].status_reasons+'</span></li>';
trs += '<li><label class="label_name">事件根源</label><span>'+data[0].event_root+'</span></li>';
trs += '<li><label class="label_name">解决方案</label><span>'+data[0].solution+'</span></li>';
trs += '</ul>';
trs += '</div>';
trs += '</div>';
trs += '</div>';
$("#Supplier_Info").append(trs);
layer.open({
type: 1,
title: '详细信息',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['600px' , '800px'],
content: $('#Supplier_Info')
});
},
error: function () {
alert("无数据");
}
});
}
layer.open的type一定要是1，而且content选择的是呢个div的id，这样就可以弹出一个动态生成的弹出层了

其实还可以使用freemarker的方法去生成页面，我只是举了我自己日常中的例子

本人一直是做后端的，可能实现前端功能的时候并不是最简单的方法，不过只要是能实现就好了