在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.table 4 , layer = parent.layer 5 , $ = layui.jquery; 6 7 //在tab頁點擊收縮菜單面板 8 9 10 /* 11 初始化表格 12 */ 13 function initTable(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: queryStr 42 //,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使用體驗很棒。