(2)可以禁用嵌入页中的滚动条。
layer.open({
type: 2,
area: ['600px', '250px'],
content: ['detail.html', 'no']
});
4，添加按钮
弹出框支持添加无限个按钮，特别注意以下两点：
按钮1 的回调是 yes，而从按钮2开始，则回调为 btn2、btn3...以此类推
按钮 1 点击后不会自动关闭提示框(之后的都会)，如需关闭，需要调用 close方法。
layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['500px', '170px'],
content: '
btn: ['按钮1', '按钮2', '按钮3'],
yes: function(){
alert("按钮1点击");
layer.closeAll(); //关闭所有弹出框
},
btn2: function(){
alert("按钮2点击");
},
btn3: function(){
alert("按钮3点击");
},
cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
5，最大化、最小化功能
将 maxmin属性设置为 true时，标题栏右侧会出现最大化、最小化按钮，点击后即可放大或缩小整个提示框。
layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['500px', '200px'],
maxmin: true, //支持放大缩小
content: '
});
6，多窗口模式
我们可以像 Windows窗口那样，弹出多个提示框同时使用，要注意以下两点：
将背景遮罩隐藏，否则每次只能看到一个提示框。
点击某个提示框时要将其置顶，防止被其他提示框遮挡。
//循环弹出3个窗口
for(var i=0 ; i<3; i++){
layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['300px', '150px'],
maxmin: true, //支持放大缩小
shade: 0, //不显示背景遮罩
offset: [ //为了演示，随机坐标
Math.random()*($(window).height()-300),
Math.random()*($(window).width()-390)
],
zIndex: layer.zIndex, //层叠顺序
success: function(layero){ //点击摸个弹出框时会调用
layer.setTop(layero); //置顶当前窗口
},
skin: "layui-layer-border",
content: '
});
}
7，隐藏标题栏
我们还可以将提示框的标题、关闭按钮全部隐藏，只显示内容。要注意的是，由于没有关闭按钮，所以需要设置点击遮罩关闭提示框的功能。
layer.open({
type: 1, //1:自定义内容 2:iframe
title: false, //不显示标题
closeBtn: 0, //不显示关闭按钮
shadeClose: true, //点击外部遮罩自动关闭提示框
content: '
});
8，修改样式
(1)通过 skin配置属性我们可以设置提示框的样式。比如下面将提示框背景改成蓝色。
.yourclass {
background-color: #C1ECFF; /* 浅蓝色背景 */
}
window.onload = function() {
//显示自定义的提示框
layer.open({
type: 1, //1:自定义内容 2:iframe
title: false, //不显示标题
closeBtn: 0, //不显示关闭按钮
shadeClose: true, //点击外部遮罩自动关闭提示框
skin: 'yourclass', //弹出框样式
content: '
});
}
(2)layer也自带了一些样式供我们直接使用。比如下面给提示框外部加上边框。
//显示自定义的提示框
layer.open({
type: 1, //1:自定义内容 2:iframe
title: false, //不显示标题
closeBtn: 0, //不显示关闭按钮
shadeClose: true, //点击外部遮罩自动关闭提示框
skin: 'layui-layer-rim', //加上边框
content: '
});
(3)下面是灰色样式皮肤。
layer.open({
type: 1, //1:自定义内容 2:iframe
skin: 'layui-layer-hui', //灰色皮肤
content: '
});
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
