《layui宇宙版教程》：弹出层-4

最新推荐文章于 2025-03-04 09:08:52 发布

立志做一个佳娃~

最新推荐文章于 2025-03-04 09:08:52 发布

阅读量384

点赞数

分类专栏： Layui宇宙版教程文章标签： layui 前端

本文链接：https://blog.youkuaiyun.com/ghyghost/article/details/108115835

版权

Layui宇宙版教程专栏收录该内容

40 篇文章

订阅专栏

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.18.31 tipsMore是否允许同时显示多个tips

类型：Boolean，默认值false。

允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

class="layui-input">

</div>

<input type="text" id="password" name="password" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

class="layui-input">

</div>

</form>

var layer = layui.layer;

var form = layui.form;

layer.open({

type: 4,

tips: [2, 'red'],

content: ['账号不能为空', '#username'],

tipsMore: true,

shade: false,

fixed: false

});

layer.open({

type: 4,

tips: [2, 'red'],

content: ['密码不能为空', '#password'],

tipsMore: true,

shade: false,

fixed: false

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.18.32 success层弹出后的成功回调方法

类型：Function，默认值null。

当需要在层创建完毕时执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM和当前层索引。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.open({

type: 1,

content: "<span style='color:red'>我是span</span>",

success: function(layero, index) {

alert(layero + " " + index);

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.18.33 yes确定按钮回调方法

类型：Function，默认值null。

该回调携带两个参数，分别为当前层索引、当前层DOM对象。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.open({

type: 0,

content: "<span style='color:red'>我是span</span>",

yes: function(index, layero) {

alert(index + " " + layero);

layer.close(index); //如果设置了yes回调，需进行手工关闭

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.18.34 cancel右上角关闭按钮触发的回调

类型：Function，默认值null。

该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.open({

type: 0,

content: "<span style='color:red'>我是span</span>",

cancel: function(index, layero) {

if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭

layer.close(index)

}

return false;

}

});

</script>

</body>

</html>

1.18.35 end层销毁后触发的回调

类型：Function，默认值null。

无论是确认还是取消，只要层被销毁了，end回调都会执行，不携带任何参数。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.open({

type: 0,

content: "<span style='color:red'>我是span</span>",

end: function() {

alert('销毁了！');

}

});

</script>

</body>

</html>

1.18.36 full/min/restore分别代表最大化、最小化、还原后触发的回调

类型：Function，默认值null。

携带一个参数，即当前层DOM。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.open({

type: 1,

content: "<span style='color:red'>我是span</span>",

maxmin: true,

full: function(layero) {

alert('full！');

min: function(layero) {

alert('min！');

restore: function(layero) {

alert('restore！');

}

});

</script>

</body>

</html>

1.18.37 layer.ready(callback)初始化就绪

由于layer内置了轻量级加载器，所以根本不需要单独引入css等文件，但是加载总是需要过程和时间的，当在页面一打开就要执行弹层时，最好是将弹层放入ready方法中。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.ready(function() {

layer.msg('很高兴一开场就见到你');

});

</script>

</body>

</html>

1.18.38 layer.alert(content, options, yes)普通信息框

用于对用户造成比较强烈的关注。options是可选参数，yes是回调方法。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

$("#button1").click(function() {

layer.alert('只想简单的提示');

});

$("#button2").click(function() {

layer.alert('加了个图标', {

icon: 1

});

$("#button3").click(function() {

//这时如果你也还想执行yes回调，可以放在第三个参数中。

layer.alert('有了回调', function(index) {

//do something

alert("点击了确定！");

layer.close(index);

});

</script>

</body>

</html>

1.18.39 layer.confirm(content, options, yes, cancel)询问框

系统的confirm具有阻塞特性，而layer.confirm(content, options, yes, cancel)需要把交互的语句放在回调体中。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

$("#button1").click(function() {

layer.confirm('is not?', {

icon: 3,

title: '提示'

}, function(index) {

//do something

alert(index);

layer.close(index);

});

$("#button2").click(function() {

layer.confirm('is not?', function(index) {

//do something

alert(index);

layer.close(index);

});

</script>

</body>

</html>

1.18.40 layer.msg(content, options, end)提示框

开发msg方法的目的是想将其打造成露脸率最高的提示框，而事实上的确也在大量地使用它，因为它简单，而且占据很少的面积，默认还会3秒后自动消失。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

$("#button1").click(function() {

layer.msg('只想弱弱提示');

});

$("#button2").click(function() {

layer.msg('有表情地提示', {

icon: 6

});

$("#button3").click(function() {

layer.msg('关闭后想做些什么', function() {

//do something

});

$("#button4").click(function() {

layer.msg('同上', {

icon: 1,

time: 2000 //2秒关闭（如果不配置，默认是3秒）

}, function() {

//do something

});

</script>

</body>

</html>

1.18.41 layer.load(icon, options)加载层

type:3的深度定制。load并不需要传太多的参数，如果不喜欢默认的加载风格，icon支持传入0-2，0是默认值。另外特别注意一点：load默认是不会自动关闭的，因为一般会在ajax回调体中关闭它。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

$("#button1").click(function() {

var index = layer.load();

setTimeout(function() {

layer.close(index);

}, 3000)

});

$("#button2").click(function() {

var index = layer.load(1); //换了种风格

setTimeout(function() {

layer.close(index);

}, 3000)

});

$("#button3").click(function() {

var index = layer.load(2, {

time: 10 * 1000

}); //又换了种风格，并且设置最长等待10秒

});

</script>

</body>

</html>

1.18.42 layer.tips(content, follow, options)层

type:4的深度定制。默认是在元素右边弹出

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

class="layui-input">

</div>

</form>

var form = layui.form;

var layer = layui.layer;

$(document).ready(function() {

$("#button1").click(function() {

layer.tips('只想提示地精准些', '#username');

});

$('#username').on('click', function() {

var that = this;

layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可

});

$("#button2").click(function() {

layer.tips('在右面', '#username', {

tips: 2

});

</script>

</body>

</html>

1.18.43 layer.close(index)关闭特定层

想关闭当前页的某个层时，需要调用close(index)方法，而获得index代码如下：

var index = layer.open();

var index = layer.alert();

var index = layer.load();

var index = layer.tips();

每一种弹层调用方式都会返回一个index值，代表弹层的唯一标识，再结合close()方法：

layer.close(index);

实现弹层的关闭。

如果想关闭最新弹出的层，直接获取layer.index即可，代码如下：

layer.close(layer.index);

它获取的index值始终是最新弹出的某个层的index值，值是由layer内部动态递增计算的。

当在iframe页面关闭自身时使用如下代码：

var index = parent.layer.getFrameIndex(window.name);

先得到当前iframe层的索引，然后再执行关闭方法：

parent.layer.close(index);

1.18.43.1 layer.close(index)关闭特定层

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

var index = layer.open({

title: false,

type: 1,

closeBtn: 0,

content: "<div id='mydiv' style='background-color:blue;color:white'>倒计时：10秒！</div>",

success: function(layero, index) {

var runTime = 0;

var intervalHandler = setInterval(function() {

if (runTime == 10) {

clearInterval(intervalHandler);

layer.close(index);

} else {

$(layero).find("#mydiv").text("倒计时：" + (10 - runTime) + "秒！");

}

runTime++;

}, 1000);

}

});

</script>

</body>

</html>

1.18.43.2 关闭iframe弹出层

文件iframe.html代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

$(document).ready(function() {

$("#closeSelf").click(function() {

var index = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

});

</script>

</body>

</html>

运行html代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

var index = layer.open({

type: 2,

content: "iframe.html"

});

</script>

</body>

</html>