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 |