1. Detailed explanation of commonly used attributes:
layer.open({
// 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
type: 1,
title: "标题",
// 当type: 2时就是url
content: "内容/url",
// 如果不想要界面滚动条可以这样写
//content: ["内容/url",'no']
// 宽高：如果是100%就是满屏
area: ['733px', '450px'],
// 坐标：auto（默认坐标，即垂直水平居中），具体当文档：https://www.layui.com/doc/modules/layer.html#offset
offset: 'auto',
// 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推
btn: ['按钮1', '按钮2'],
// 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0
closeBtn: 1,
// 遮罩：默认：0.3透明度的黑色背景（'#000'）
shade: 0.3,
// 是否点击遮罩关闭：默认：false
shadeClose: false,
// 自动关闭所需毫秒：默认：0不会自动关闭
time: 0,
// 最大最小化：默认：false
maxmin: false,
// 固定：默认：true
fixed: true,
// 是否允许拉伸：默认：true
resize: true,
// 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突
zIndex: 19891014,
// 层弹出后的成功回调方法：layero前层DOM，index当前层索引
success: function(layero, index){
},
// 第一个按钮事件，也可以叫btn1
yes: function (index, layero) {
},
btn2: function (index, layero) {
layer.close(index);
},
// 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
cancel: function(index, layero){
if(layer.confirm('确定要关闭么')){
//只有当点击confirm框的确定时，该层才会关闭
layer.close(index);
}
return false;
},
// 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
end: function(){
},
// 最大化后触发的回调：携带一个参数，即当前层DOM
full: function(layero){
},
// 最小化后触发的回调：携带一个参数，即当前层DOM
min: function(layero){
},
// 还原后触发的回调：携带一个参数，即当前层DOM
restore: function(layero){
},
});
example:
layer.open({
type: 1,
title: "标题",
content: "内容/url",
area: ['733px', '450px'],
offset: 'auto',
btn: ['按钮1', '按钮2'],
closeBtn: 1,
shade: 0.3,
shadeClose: false,
time: 0,
maxmin: false,
fixed: true,
resize: true
zIndex: 19891014,
success: function(layero, index){
},
yes: function (index, layero) {
},
btn2: function (index, layero) {
layer.close(index);
},
cancel: function(index, layero){
layer.close(index);
}
return false;
},
end: function(){
},
full: function(layero){
},
min: function(layero){
},
restore: function(layero){
},
});
Two: Layer.open GET method description
As shown in the following code snippet, it is the most common way to use layer.open. Here are a few points to note:
-
type is the basic layer type. Layer provides 5 layer types. The values that can be passed in are: 0 (information box, default), 1 (page layer), 2 (iframe layer), 3 (loading layer), 4 (tips layer).
-
The bottom layer of layer.open uses the get request method, so the pop-up layer page parameters using layer.open can only be spliced behind the url.
-
For the pop-up box of type=2, you can use the method in the illustration to call the doSubmit() method of the sub-page pop-up box and obtain the return value of the method.
layer.open({
type: 2,
area: ["900px", "520px"],
title: "子页面-弹出框",
content: "${basePath}/aaa/bbb/get?id=1",
btn: ['确定', '关闭'],
yes: function (index, layero) {
// 调用子页面（弹出框）的doSubmit方法并获取其返回值
var iframeWin = layero.find('iframe')[0];
var data = iframeWin.contentWindow.doSubmit();
},
cancel: function (layer_window) {
// 关闭弹出框页面
layer.close(layer_window);
}
});
3. Introduction to layer.open POST method
Since the underlying layer of layer.open is the get request method, if you need to use post requests, you must introduce other methods, and ajax is used here.
Idea: Use ajax to pass the parameter request to the html of the page through post method, and then display it through the layer.open method.
$.ajax({
type: "POST",
url: "${basePath}/aaa/bbb/post",
data: {
"id":1, "type":2, "code":3},
success: function(res) {
var html = res.data;
layer.open({
type: 1,
area: ["900px", "520px"],
title: "子页面-弹出层",
content: html,
btn: ['确定', '关闭'],
yes: function (index, layero) {
// 调用子页面（弹出框）的doSubmit方法并获取其返回值
var context = layero.find('page').context;
var data = context.defaultView.doSubmit();
},
cancel: function (layer_window) {
// 关闭弹出框页面
layer.close(layer_window);
}
});
}
});
As shown in the above code, it is the source of layer.open post request page. There are a few points to note here:
-
type must be 1, because the content of layer.open here directly gives the HMTL code.
-
The way of calling subpage methods has changed, as shown in the above example.