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 | | 用于填充表單的數據 |