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

最新推荐文章于 2023-04-10 16:51:02 发布

立志做一个佳娃~

最新推荐文章于 2023-04-10 16:51:02 发布

阅读量353

点赞数 1

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

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

版权

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

40 篇文章

订阅专栏

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

1.18.44 layer.closeAll(type)关闭所有层

如果不想获取index而实现关闭弹层时，可以使用closeAll方法。如果不指定层类型的话，它会销毁当前页面中所有的layer层。当然，如果只想关闭某个类型的层，那么可以使用如下代码：

layer.closeAll(); //疯狂模式，关闭所有层

layer.closeAll('dialog'); //关闭信息框

layer.closeAll('page'); //关闭所有页面层

layer.closeAll('iframe'); //关闭所有的iframe层

layer.closeAll('loading'); //关闭加载层

layer.closeAll('tips'); //关闭所有的tips层

测试代码如下：

<!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 form = layui.form;

var layer = layui.layer;

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

});

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

layer.closeAll();

});

</script>

</body>

</html>

1.18.45 layer.style(index, cssStyle)重新定义层content中的样式

该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许传入任意的css属性：

layer.style(index, {

width: '1000px',

top: '10px'

});

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

var index = layer.open({

type: 1,

content: "我是弹出层1",

shade: false

});

setTimeout(function() {

layer.style(index, {

width: '800px',

backgroundColor: 'green',

});

}, 3000);

</script>

</body>

</html>

1.18.46 layer.title(title, index)改变层的标题

使用方式：layer.title('标题变了', index)

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

var index = layer.open({

type: 1,

content: "我是弹出层1",

shade: false

});

setTimeout(function() {

layer.title("zzzzzzzzzzzzzzzzzzzzzzzzzzzz", index)

}, 3000);

</script>

</body>

</html>

1.18.47 layer.getChildFrame(selector, index)获取iframe页的DOM

当试图在当前页获取iframe页的DOM元素时，可以用此方法。selector即iframe页的选择器

文件iframe.html代码如下：

<!DOCTYPE html>

<html>

<head>

function testMethod() {

document.getElementById("divX").innerText = document.getElementById("divX").innerText + "__testMethod方法添加的文本__";

}

</script>

</head>

<body>

<div id="divX" style="background-color: red;color:white">我是Div，我在另外一个页面中！</div>

</body>

</html>

运行文件代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

layui.use('layer', function() {

var layer = layui.layer;

var index = layer.open({

type: 2,

content: 'iframe.html',

success: function(layero, index) {

var body = layer.getChildFrame('body', index);

$(body).find("div").append("__这条信息来自于父页面！");

var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

iframeWin.testMethod();

}

});

</script>

</body>

</html>

1.18.48 layer.getFrameIndex(windowName)获取特定iframe层的索引

一般用于在iframe页关闭自身时用到。

此方法在前面章节已经介绍完毕。

1.18.49 layer.iframeAuto(index)指定iframe层自适应

调用该方法时，iframe层的高度会重新进行适应

文件iframe.html测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

begin

end!

</body>

</html>

运行文件代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

layui.use('layer', function() {

var layer = layui.layer;

var index = layer.open({

type: 2,

content: 'iframe.html',

success: function(layero, index) {}

});

</script>

</body>

</html>

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

出现垂直滚动条，可以使用iframeAuto(index)方法设置高度自适应。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

layui.use('layer', function() {

var layer = layui.layer;

var index = layer.open({

type: 2,

content: 'iframe.html',

success: function(layero, index) {

layer.iframeAuto(index);

}

});

</script>

</body>

</html>

运行后没有垂直滚动条，iframe高度自适应了，如图1-xx所示。

1.18.50 layer.iframeSrc(index, url)重置特定iframe url

使用方式：layer.iframeSrc(index, 'http://sentsin.com')

文件iframe1.html代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

begin

end!

</body>

</html>

文件iframe2.html代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

newbegin

newend!

</body>

</html>

运行文件代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

var index = layer.open({

type: 2,

content: 'iframe1.html',

success: function(layero, index) {

layer.iframeAuto(index);

}

});

setTimeout(function() {

layer.iframeSrc(index, "iframe2.html");

}, 3000);

</script>

</body>

</html>

1.18.51 layer.setTop(layero)置顶当前窗口

非常强大的一个方法，虽然一般很少用，但是当页面有很多很多layer窗口，需要像Window窗体那样点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var layer = layui.layer;

layer.open({

type: 2,

shade: false,

area: '500px',

content: 'http://www.layui.com',

zIndex: layer.zIndex, //重点1

success: function(layero) {

layer.setTop(layero); //重点2

}

});

layer.open({

type: 2,

shade: false,

area: '500px',

content: 'http://www.layui.com',

zIndex: layer.zIndex, //重点1

success: function(layero) {

layer.setTop(layero); //重点2

}

});

layer.open({

type: 2,

shade: false,

area: '500px',

content: 'http://www.layui.com',

zIndex: layer.zIndex, //重点1

success: function(layero) {

layer.setTop(layero); //重点2

}

});

</script>

</body>

</html>

1.18.52 layer.full()、layer.min()、layer.restore()手工执行最大小化

文件iframe.html代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

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

parent.layer.full(index);

});

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

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

parent.layer.min(index);

});

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

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

parent.layer.restore(index);

});

</script>

</body>

</html>

运行文件代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var index = layer.open({

type: 2,

content: 'iframe.html',

shade: false,

maxmin: true

});

</script>

</body>

</html>

1.18.53 layer.prompt(options, yes)输入层

options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，也可以不传。yes回调方法携带value表单值，index索引，elem表单元素。

prompt层新定制的成员如下

{

formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）

value: '', //初始时的值，默认空字符

maxlength: 140, //可输入文本的最大长度，默认500

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

$(document).ready(function() {

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

layer.prompt(function(value, index, elem) {

alert(value); //得到value

layer.close(index);

});

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

layer.prompt({

formType: 0,

value: '初始值',

title: '请输入值',

area: ['800px', '350px'] //自定义文本域宽高

}, function(value, index, elem) {

alert(value); //得到value

layer.close(index);

});

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

layer.prompt({

formType: 1,

value: '初始值',

title: '请输入值',

area: ['800px', '350px'] //自定义文本域宽高

}, function(value, index, elem) {

alert(value); //得到value

layer.close(index);

});

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

layer.prompt({

formType: 2,

value: '初始值',

title: '请输入值',

area: ['800px', '350px'] //自定义文本域宽高

}, function(value, index, elem) {

alert(value); //得到value

layer.close(index);

});

</script>

</body>

</html>

1.18.54 layer.tab(options)tab层

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

layer.tab({

area: ['600px', '300px'],

tab: [{

title: 'TAB1',

content: '内容1'

}, {

title: 'TAB2',

content: '内容2'

}, {

title: 'TAB3',

content: '内容3'

}]

});

</script>

</body>

</html>

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

1.18.55 layer.photos(options)相册层

相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

layer.photos({

photos: {

"title": "", //相册标题

"id": 123, //相册id

"start": 1, //初始显示的图片序号，默认0

"data": [ //相册包含的图片，数组格式

{

"alt": "图片名",

"pid": 1, //图片id

"src": "4.png", //原图地址

"thumb": "" //缩略图地址

{

"alt": "图片名",

"pid": 2, //图片id

"src": "5.png", //原图地址

"thumb": "" //缩略图地址

}

]

anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机。

tab: function(pic, layero) {

alert(pic); //当前图片的一些信息

}

});

</script>

</body>

</html>

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

官方网址：

https://layer.layui.com/

中有若干常用使用案例，可以进行参考。