iframe模式就是在彈出的窗口通過地址加載一個新的頁面，首先引入modal模塊，如果用模板原有的，則可跳過此步。
~~~javascript
layui.define(['jquery', 'modal''], function(exports) {
var $ = layui.jquery,
modal = layui.modal;
//初始化
modal.init();
exports('main', {});
});
~~~
接下來便可在頁面元素方便的使用了，如需給按鈕綁定iframe窗口，給元素加modal-iframe樣式，用于綁定單擊事件，添加data-params屬性，用于初始化窗口的配置參數。
~~~
<button class="layui-btn layui-btn-small modal-iframe" data-params='{"content": "article-add.html", "title": "添加文章","full":"true"}'>
<i class="iconfont"></i> 添加
</button>
~~~
這里要注意data-params中的content屬性值必須是url地址
####配置參數
| 參數 | 默認值 | 說明 |
| ---------- | ----- | -------------------------- |
| title | false | 彈出窗口的標題 |
| full | false | 是否全屏 |
| shadeClose | true | 是否點擊遮罩關閉 |
| shade | false | 是否遮罩 |
| maxmin | false | 是否可最大最小化 |
| content | | url地址 |
| area | auto | 彈出框的大小，格式：area=300px,600px |
