《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.18.21 resize是否允许拉伸
类型：Boolean，默认值true。
默认情况下，可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "test text 1",
resize: false
});
</script>
</body>
</html>
弹出层的大小不可以改变。
1.18.22 resizing监听窗口拉伸动作
类型：Function，默认值null。
当拖拽弹层右下角进行尺寸调整时，如果设置了该回调，则会执行。回调返回一个参数：当前层的DOM对象。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "test text 1",
resizing: function(layero) {
var abc = layero;
var xyz = "";
}
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.23 scrollbar是否允许浏览器出现滚动条
类型：Boolean，默认值true。
默认允许浏览器滚动，如果设置scrollbar: false，则屏蔽。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "test text 1",
scrollbar: false
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.24 maxWidth最大宽度
类型：Number，默认值360px。
请注意：只有当area: 'auto'时，maxWidth的设置才有效。
一般在布局时，不想要元素的宽度限定死，并且想要它的实际宽度随其本身内容自适应，但又不想宽度过大破坏整体布局，这时候就会应用max-width限制元素的最大宽度，元素实际宽度在0~max-width之间。具有自动换行的效果。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end",
area: ['2000px', '300px'],
});
</script>
</body>
</html>
运行效果如图1-xx所示。
宽高都固定了，并且看不到begin和end字符串信息，过多的信息全被隐藏了，这就是固定宽高的缺点。
使用属性maxWidth除了支持最大宽度外还可以实现宽度自适应。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
layer.open({
type: 1,
content: "begin<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end",
area: 'auto',
maxWidth: 2000
});
</script>
</body>
</html>
最大宽度显示效果如图1-xx所示。
并且还具有宽度自适应的效果，如图1-xx所示。
浏览器在任何宽度下都可以把信息显示完整。
1.18.25 maxHeight最大高度
类型：Number，默认值无。
请注意：只有当高度自适应时，maxHeight的设置才有效。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",
area: ['200px', '300px']
});
</script>
</body>
</html>
固定宽高的运行效果如图1-xx所示。
在弹出层的下面出现了大面积空白，影响界面美观性，属性maxHeight支持高度自适应。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",
area: 'auto',
maxHeight: 400
});
</script>
</body>
</html>
运行效果如图1-xx所示。
通过使用属性maxHeight后，弹出层下面的大面积空白消失了，说明属性maxHeight支持高度自适应。
如果内容过多，最大高度maxHeight还有效吗？
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",
area: 'auto',
maxHeight: 400
});
</script>
</body>
</html>
运行效果如图1-xx所示。
内容超过400px后出现垂直滚动条，最大高度是400px。
1.18.26 zIndex层叠顺序
默认值19891014（作者贤心生日）。
一般用于解决和其它组件的层叠冲突。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div style="position: absolute; z-index: 19891015;">我在最上面！</div>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!end!end!end!",
});
</script>
</body>
</html>
运行效果如图1-xx所示。
自定义div的z-index: 19891015值大于19891014，所以文字可以选中，说明自定义div在遮罩层之上。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div style="position: absolute; z-index: 100;">我在最上面！</div>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!end!end!end!",
});
</script>
</body>
</html>
运行效果如图1-xx所示。
文字“我在最上面！”选中不了了，因为在遮罩层的下面，被遮罩层覆盖了。
1.18.27 move触发拖动的元素
类型：String/DOM/Boolean，默认值'.layui-layer-title'。
默认是触发标题区域实现拖拽。如果想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。还配置设置move: false来禁止拖拽。
1.18.27.1 测试String
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span class='myspanclass'>我的span</span>",
move: '.myspanclass'
});
</script>
</body>
</html>
1.18.27.2 测试DOM
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div id="mydiv" style="display: none;">
<div>我是div</div>
</div>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: $("#mydiv"),
move: $("#mydiv div")
});
</script>
</body>
</html>
1.18.27.3 禁用move
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span style='color:red'>我是span</span>",
move: false
});
</script>
</body>
</html>
1.18.28 moveOut是否允许拖拽到窗口外
类型：Boolean，默认值false。
默认只能在窗口内拖拽，如果想拖到窗外，那么设置moveOut: true即可
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span style='color:red'>我是span</span>",
moveOut: true
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.29 moveEnd拖动完毕后的回调方法
类型：Function，默认值null。
默认不会触发moveEnd，如果需要可以设置moveEnd: function(layero){}即可。其中layero为当前层的DOM对象
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span style='color:red'>我是span</span>",
moveEnd: function(layero) {
alert('拖动结束！');
}
});
</script>
</body>
</html>
1.18.30 tips方向和颜色
类型：Number/Array，默认值2。
tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设置。如tips: 3则表示在元素的下面出现。有时还可能会定义一些颜色，可以设置tips: [1, '#c00']。
1.18.30.1 测试1
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [1, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.30.2 测试2
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [2, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.30.3 测试3
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [3, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.30.4 测试4
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [4, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
扫一扫
6275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
