在amdinlte首页引入layui.js 和layui.css后添加代码

<script>layui.use(['layer'], function() {var layer =layui.layer, $=layui.jquery;})</script>

so，我tab层的iframe全部都是使用这个layer弹出（layui不推荐这样使用），这样可以做是为了避免tab页中iframe 的弹出层的嵌页效果，当然也可以在子页面使用layer=layui.layer

（页面弹出层）

1 <script>
2         layui.use(['table', 'layer'], function() {3             var table =layui.table4                 , layer =parent.layer5                 , $ =layui.jquery;6
7             //在tab页点击收缩菜单面板
8
9
10             /*
11 初始化表格12              */
13             functioninitTable(queryStr) {14 table.render({15                     elem: '#SysSampleIndexTable'
16                     , url: '/SysSample/GetList'
17                     , method: "post"
18                     //, cellMinWidth: 55 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
19 , cols: [[20                         { type: 'checkbox'}21                         , { field: 'id', title: 'ID', sort: true, hide: true}22                         , { field: 'Name', title: '用户名'}23                         , { field: 'Age', title: '年龄', sort: true}24                         , { field: 'Bir', title: '生日', hide: true}25                         , { field: 'Note', title: '简介' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
26                         , { field: 'Photo', title: '图片', sort: true, hide: true}27                         , { field: 'CreateTime', title: '创建时间'}28                         , { fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 160}29 ]]30                     , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
31                         layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
32                         //,curr: 5 //设定初始在第 5 页
33                         , groups: 3 //只显示 1 个连续页码
34                         , first: '首页' //不显示首页
35                         , last: '尾页' //不显示尾页
36
37 }38                     , limit: 10
39                     , limits: [6, 10, 20, 30, 50, 100]40                     , where: {//条件
41 id: queryStr42                         //,sort:'CreateTime'//排序字段
43 }44                     //, request: {//请求参数
45                     //pageName: 'page' //页码的参数名称，默认：page
46                     //, limitName: 'limit' //每页数据量的参数名，默认：limit
47                     //}
48                     //, response: {//返回参数
49                     //statusName: 'status' //规定数据状态的字段名称，默认：code
50                     //, statusCode: 200 //规定成功的状态码，默认：0
51                     //, msgName: 'hint' //规定状态信息的字段名称，默认：msg
52                     //, countName: 'total' //规定数据总数的字段名称，默认：count
53                     //, dataName: 'rows' //规定数据列表的字段名称，默认：data
54                     //}
55                     //,initSort: {
56                     //field: 'id' //排序字段，对应 cols 设定的各字段名
57                     //, type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
58                     //}
59 })60 }61
62             initTable("");63             table.on('tool(SysSampleIndexTable)', function(obj) {64                 //调试  ->  console.log(obj)
65                 var id =obj.data.id;66
67                 if (obj.event === 'del') {68                     layer.confirm('确认删除', function(index) {69                         //obj.del();
70
71                         //post请求删除
72                         $.post('/SysSample/Delete', { "id": id }, function(Result) {73                             //提示成功或失败
74                             if (Result.type = 1) {75                                 layer.msg('删除成功', {76                                     offset: 'rb',77                                     icon: 1,78 })79 }80                             else{81                                 layer.msg('删除失败', {82                                     offset: 'rb',83                                     icon: 1,84 })85 }86                             initTable("");87
88
89                         }, 'json');90
91 layer.close(index);92 });93                 } else if (obj.event === 'edit') {94 layer.open({95                         type: 2,96                         title: '编辑',97                         maxmin: true,98                         shade: 0.8,99                         area: ['450px', '90%'],100                         content: '/SysSample/Edit?id=' + encodeURI(id) //iframe的url});
101 })102 }103                 else if (obj.event === "details") {//详情页
104 layer.open({105                         type: 2,106                         title: '详情',107                         maxmin: true,108                         shade: 0.8,109                         area: ['450px', '90%'],110                         btn: ['按钮1'],111                         yes:function(index, layero) {112 layer.close(index);113                             //dom对象
114                             //console.log(layero);
115 },116                         content: '/SysSample/Details?id=' + id //iframe的url});
117 })118 }119 });120
121             //查询
122             $("#btnSearch").on("click", function() {123                 initTable($("#textSearch").val())124 })125
126             //新增
127             $("#btnCreate").on("click", function() {128                 var url = "/SysSample/Create";129 layer.open({130                     type: 2,131                     title: '添加',132                     shade: 0.3,133                     resize: false,134                     area: ['700px', '80%'],135                     content: '/SysSample/Create'
136 })137                 //layer.open({
138                 //title: '新增',
139                 //type: 1,
140                 //id: "SysSamplePage",
141                 //shadeClose: true,
142                 //maxmin: true,
143                 //skin: 'layui-layer-rim',
144                 //area: ['500px', '380px'],
145                 //content: $('#modalwindow').html("<iframe width='100%' height='380' scrolling='yes' frameborder='0'' src='"+encodeURI(url)+"'></iframe>")
146                 //});
147 })148
149 })150 </script>

注：本人觉得layui的layer使用体验很棒。