在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使用體驗很棒。