以前習慣了bootstrap的模態框，突然換了layui，想的用layui實現類似於bootstrap的模態框功能。
用到了layui的layer模塊，例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./layui/css/layui.css"> <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript" src="../JS/jquery-1.8.3.js"></script> <script> function openModak(){ $("[name='testname']").val("xxxxxxxxxxxxxxx");//向模態框中賦值 layui.use(['layer'],function () { var layer = layui.layer,$=layui.$; layer.open({ type:1,//類型 area:['400px','300px'],//定義寬和高 title:'查看詳細信息',//題目 shadeClose:false,//點擊遮罩層關閉 content: $('#motaikunag')//打開的內容 }); }) } </script> </head> <body> <button type="button" onclick="openModak()">開啟模態框</button> </body> </html> <!--模仿bootstrap的模態框--> <div id="motaikunag" style="display: none;"> <div class="layui-row"> <div class="layui-col-md9"> 你的內容 9/12 </div> <div class="layui-col-md3"> 你的內容 3/12 </div> </div> <div class="layui-row"> <div class="layui-col-md3"> 名字 </div> <div class="layui-col-md9"> <input type="text" name="testname" value=""> </div> </div> <br/> <input type="button" onclick="javascript:alert('點擊按鈕')" title="點我" value="點我"> </div>
結果:
type - 基本層類型:
類型：Number，默認：0
layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。 若你采用layer.open({type: 1})方式調用，則type為必填項（信息框除外）
content - 內容
類型：String/DOM/Array，默認：''
content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨着type的不同而不同。譬如：
/!*
如果是頁面層
*/
layer.open({
type: 1,
content: '傳入任意的文本或html' //這里content是一個普通的String
});
layer.open({
type: 1,
content: $('#id') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
});
//Ajax獲取
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe層
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open執行tips層
*/
layer.open({
type: 4,
content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM
});
補充：如果想更好的設置寬度，可以:
layui.use(['layer'],function () { var layer = layui.layer; var width=($(window).width()*0.80); var height=($(window).height()*0.60); layer.open({ title:'添加字典', area: [width+'px', height +'px'],//大小 fix: false, //不固定 maxmin: true,//是否顯示最大最小化按鈕 shadeClose: false, shade:0.4, type:1, content:$('#addModal') }); })
area:
類型：String/Array，默認：'auto'
在默認狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']
為了使模態框的高度自適應而且頁面過高出現滾動條，可以采用如下配置:
//2.打開模態框 var width=($(window).width()*0.60); var top =($(window).height()*0.10); var index = layer.open({ title:'配置權限', area: width+'px',//大小定寬，高度自適應 fixed: false, //不固定 maxmin: false,//顯示最大最小化按鈕 zIndex:1500,//層 offset:top+'px',//定義坐標 scrollbar:true,//顯示滾動條 shadeClose: false,//點擊外部不關閉 shade:0.4,//陰影 type:1, content:$('#setPermissionModal') }); //向頁面隱藏index $("#hidden_setPermission_index").val(index);
為了實現更好的模態框效果，我們可以設置樣式:
HTML:
<!--2.修改字典模態框--> <%--隱藏打開的index--%> <input type="hidden" id="hidden_update_index"> <div class="x-body" style="display: none" id="updateModal"> <form class="layui-form" id="updateDictionaryForm"> <!--0.隱藏上級字典編號--> <div class="layui-form-item"> <label for="dictionaryname" class="layui-form-label"> 上級字典 </label> <div class="layui-input-inline"> <input type="text" id="update_updictionaryname" disabled class="layui-input" value=""> <%--隱藏需要修改的字典編號--%> <input type="hidden" name="dictionaryid" id="update_dictionaryid"> </div> </div> <!--1.字典名稱--> <div class="layui-form-item"> <label for="dictionaryname" class="layui-form-label"> 字典名稱 </label> <div class="layui-input-inline"> <input type="text" id="update_dictionaryname" name="dictionaryname" required="" lay-verify="required" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>必須填寫 </div> </div> <!--2 字典描述--> <div class="layui-form-item layui-form-text"> <label for="dictionaryname" class="layui-form-label"> 字典描述 </label> <div class="layui-input-inline"> <input type="text" name="description" lay-verify="required" id="update_description" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>必須填寫 </div> </div> <%--3.字典啟用狀態--%> <div class=""> <label for="dictionaryname" class="layui-form-label"> 字典狀態 </label> <div class=""> <input type="radio" name="isuse" class="update_isuse" value="1" title="啟用"> <input type="radio" name="isuse" class="update_isuse" value="0" title="禁用" > </div> </div> <%--提交按鈕--%> <div class="layui-form-item"> <button class="layui-btn" lay-submit lay-filter="updateDictionary" type="button">修改</button> </div> </form> </div>
JS:
/*************S 修改字典相關操作************/ /** * 打開修改字典信息模態框 * @param obj 將修改按鈕自己傳下來 */ function openUpdateDict(obj){ var tr= $(obj).parent().parent();//獲取到tr元素 var update_dictionaryid = tr.children("td:eq(0)").children("input:hidden").val();//字典變 var update_dictionaryname = tr.children("td:eq(2)").text();//字典名稱 var update_updictionaryname = tr.children("td:eq(3)").text();//上級字典名稱 var update_description = tr.children("td:eq(4)").text();//字典描述 var update_isuse = tr.children("td:eq(5)").children("input:hidden").val();//字典狀態 $("#update_dictionaryid").val(update_dictionaryid); $("#update_dictionaryname").val(update_dictionaryname); $("#update_updictionaryname").val(update_updictionaryname); $("#update_description").val(update_description); /* $(".update_isuse").each(function () { if($(this).val()==update_isuse){ alert($(this).val()) $(this).prop("chcked","checked"); } });*/ $(".update_isuse:radio").removeAttr("checked");//刪除checked屬性 $(".update_isuse:radio[value='"+update_isuse+"']").attr("checked", true); form.render('radio'); //重新渲染radio單選框 var width=($(window).width()*0.80); var height=($(window).height()*0.70); var index = layer.open({ title:'修改字典信息', area: [width+'px', height +'px'],//大小 fix: true, //不固定 maxmin: true, zIndex:500, shadeClose: false, shade:0.4, type:1, content:$('#updateModal') }); //向頁面隱藏index $("#hidden_update_index").val(index); } //監聽修改表單的提交事件 layui.use(['layer','form'],function () { var layer = layui.layer,form = layui.form; form.on('submit(updateDictionary)', function(data){ $.ajax({ url:contextPath+"/dictionary/updateDict.do", data:data.field, type:'post', datatype:'text', success:function (response) { layer.msg(response,{time:1500},function () { if("修改成功"==response){ layer.close($("#hidden_update_index").val()); //關閉當前窗口 window.location.reload();//刷新頁面 } }); } }); }); }) /*************E 修改字典相關操作************/
關於更多的參數解釋參考:http://www.layui.com/doc/modules/layer.html