js关闭父级页面的layui弹窗
时间: 2023-11-11 13:04:30 浏览: 48
你可以使用如下代码关闭父级页面上的layui弹窗:
```javascript
// 获取父级页面的index对象
var index = parent.layer.getFrameIndex(window.name);
// 关闭弹窗
parent.layer.close(index);
```
其中,`parent.layer.getFrameIndex(window.name)` 用于获取父级页面上当前弹窗的索引,`parent.layer.close(index)` 用于关闭该弹窗。注意,这段代码需要在子页面中执行。
相关问题
layui弹窗打开页面
要在Layui弹窗中打开一个页面,可以使用Layui的layer模块。可以先引入layer模块,然后在需要打开弹窗的时候调用layer.open方法,并指定type为2,同时传入需要打开页面的URL。以下是示例代码:
```
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css">
<button class="layui-btn" id="openBtn">打开弹窗</button>
<script>
layui.use('layer', function(){
var layer = layui.layer;
$('#openBtn').click(function(){
layer.open({
type: 2,
title: '页面弹窗',
area: ['800px', '600px'],
content: 'https://www.example.com',
});
});
});
</script>
```
在以上示例中,点击按钮后会弹出一个宽度为800px,高度为600px的页面弹窗,内容为指定的URL。
layui弹窗传参 前端的代码,包含弹窗的和父级的
好的,以下是一个简单的layui弹窗传参的例子:
父级页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹窗传参</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
</head>
<body>
<button id="btn_open" class="layui-btn">打开弹窗</button>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
layui.use(['layer'], function(){
var layer = layui.layer;
// 点击按钮打开弹窗
$('#btn_open').click(function(){
layer.open({
type: 2,
title: '弹窗标题',
area: ['500px', '400px'],
content: 'child.html?name=张三&age=18',
btn: ['确定', '取消'],
yes: function(index, layero){
// 点击确定按钮回调函数
layer.close(index);
},
btn2: function(index, layero){
// 点击取消按钮回调函数
layer.close(index);
},
success: function(layero, index){
// 弹窗成功弹出后回调函数
console.log('弹窗打开成功');
}
});
});
});
</script>
</body>
</html>
```
弹窗页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗页面</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
</head>
<body>
<h3>传递的参数:</h3>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
layui.use(['layer'], function(){
var layer = layui.layer;
// 获取父级传递的参数
var url = window.location.href;
var data = url.split('?')[1];
var name = data.split('&')[0].split('=')[1];
var age = data.split('&')[1].split('=')[1];
$('p#name').text(name);
$('p#age').text(age);
});
</script>
</body>
</html>
```
注意:在弹窗页面中获取父级传递的参数需要用到JavaScript。以上代码仅供参考,具体实现方式可以根据实际需求进行调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)