layui open传参
时间: 2023-07-19 08:40:23 浏览: 86
在 layui中,通过 `open` 方法打开一个弹窗时,可以通过第二个参数传递一些参数。这些参数会在弹窗页面的 `ready` 回调函数中接收到。
例如:
```javascript
// 打开弹窗
layer.open({
type: 2,
title: '示例弹窗',
content: 'example.html',
area: ['800px', '600px'],
success: function(layero, index) {
// 弹窗打开成功后的回调函数
// 在这里可以获取传递过来的参数
var iframeWin = window[layero.find('iframe')[0]['name']];
console.log(iframeWin.param1); // 输出参数1的值
console.log(iframeWin.param2); // 输出参数2的值
}
}, {
param1: '参数1的值',
param2: '参数2的值'
});
```
在上面的例子中,通过 `layer.open` 方法打开一个弹窗,并通过第二个参数传递了两个参数 `param1` 和 `param2`。在弹窗页面的 `ready` 回调函数中,可以通过 `window` 对象获取到这些参数的值。
相关问题
layui.open传参
在 layui 中,可以使用 `layui.open` 方法打开一个弹窗。该方法可以传入一个对象参数,用来配置弹窗的属性和行为。以下是一个基本的 `layui.open` 示例:
```
layui.open({
title: '弹窗标题',
content: '弹窗内容',
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function(index, layero){
// 点击确定按钮后的回调函数
layer.close(index);
},
cancel: function(index, layero){
// 点击取消按钮或关闭窗口后的回调函数
layer.close(index);
}
});
```
在上述示例中,`layui.open` 方法传入了一个对象参数,该对象包含了弹窗的标题、内容、大小、按钮和回调函数等属性。其中,`title` 用于设置弹窗的标题,`content` 用于设置弹窗的内容,`area` 用于设置弹窗的大小,`btn` 用于设置弹窗的按钮,`yes` 用于设置点击确定按钮后的回调函数,`cancel` 用于设置点击取消按钮或关闭窗口后的回调函数。具体的参数和用法可以参考 layui 官方文档。
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。以上代码仅供参考,具体实现方式可以根据实际需求进行调整。
阅读全文