catch模式就是在弹出的窗口通过捕获当前页面的某个元素来显示其内容，首先引入modal模块，如果用模板原有的，则可跳过此步。
~~~javascript
layui.define(['jquery', 'modal''], function(exports) {
var $ = layui.jquery,
modal = layui.modal;
//初始化
modal.init();
exports('main', {});
});
~~~
接下来便可在页面元素方便的使用了，如需给按钮绑定catch窗口，给元素加modal-catch样式，用于绑定单击事件，添加data-params属性，用于初始化窗口的配置参数。
~~~
<button class="layui-btn layui-btn-small modal-catch" data-params='{"content": ".add-subcat", "title": "添加文章","full":"true"}'>
<i class="iconfont"></i> 添加
</button>
~~~
以下为add-sucat的内容
~~~
<div class="add-subcat">
<form id="form1" class="layui-form layui-form-pane" data-name="articleCatData" data-tpl="list-tpl" data-render="true" action="./data/success.json" method="GET">
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="title" required jq-verify="required" jq-error="请输入分类名称" placeholder="请输入分类名称" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="text" name="order" required jq-verify="number" value="100" jq-error="排序必须为数字" placeholder="分类排序" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="radio" name="switch" title="启用" value="1" checked />
<input type="radio" name="switch" title="禁用" value="0" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" jq-submit jq-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
~~~
如果添加成功后重新渲染表单，请在表单上添加三个属性
data-name="articleCatData"，此处为缓存的分类数据，就是在列表渲染tpl时填的data-name值
data-tpl="list-tpl" ，此参数为渲染tpl的模板ID
data-render="true"，此为是否执行成功后重新渲染列表
这里要注意data-params中的content属性值可以是id的方式#add-subcat,也可是样式的.add-subcat
####配置参数
| 参数 | 默认值 | 说明 |
| ---------- | ----- | -------------------------- |
| title | false | 弹出窗口的标题 |
| full | false | 是否全屏 |
| shadeClose | true | 是否点击遮罩关闭 |
| shade | false | 是否遮罩 |
| content | | 元素的ID或样式，如#article-add，.article-add |
| area | auto | 弹出框的大小，格式：area=300px,600px |
| maxmin | false | 是否可最大最小化 |
| data | | 用于填充表单的数据 |
