layui官方彈出層文檔 https://www.layui.com/doc/modules/layer.html#use
記錄layui彈出層使用
導入以下兩個js
<script th:src="@{/lib/layuiadmin/layui/layui.all.js}"></script>
<script th:src="@{/lib/jquery/jquery-1.11.3.min.js}"></script>
普通的確認,提示彈出層
//刪除方法
function deleteData(id) {
var commonvo = {
"id" : id,
"bean" : "com.xny.base.model.RsysUser"
};
var url = basePath + "/sysComEdit/comDeleteInfo";
//詢問框
layer.confirm('真的刪除?', {//詢問
}, function() {//確定後執行的事件
$.ajax({
type : "post",
url : url,
contentType : 'application/json;charset=UTF-8',
datatype : "json",
data : JSON.stringify(commonvo),//轉化爲json字符串
success : function(data) {
if ($.trim(data) == "true") {
layer.msg('操作成功', {//提示
icon : 1
});
window.setTimeout("javascript:location.href='/usersz'",
20);
} else {
layer.msg('刪除失敗', {
icon : 2
});
}
}
});
}, function() {//取消
});
}
layer
注意使用layer時,下拉選,單選按鈕,時間控件等需要重新渲染
layer.open({
type :1,
title : "高峯低谷修改",
closeBtn : 0,
area : ['40%', '45%' ],
anim : 2,
shadeClose : false,//點擊遮罩不能消失
closeBtn : 1,
content : $("#editOne"),
success : function(layero, index) {
$("#editId").val(id);
$("#editName").val(name);
$("#editType").val(type);
laydate.render({//渲染
elem : '#stime',
type : 'time',
format : 'HH:mm',
value : start,
isInitValue : true
,trigger: 'click'
})
laydate.render({
elem : '#etime',
type : 'time',
format : 'HH:mm',
value : end,
isInitValue : true
,trigger: 'click'
})
form.render();
},
cancel : function(index, layero) {
//if (confirm('確定要關閉麼')) { //只有當點擊confirm框的確定時,該層纔會關閉
layer.close(index);
//}
return false;
},
end : function() {
$("#editOne").css("display", "none");
}
})