子页面在加载时判断一个条件为真的时候父页面top页面弹框提示confirm
时间: 2023-05-23 11:07:38 浏览: 62
框,该如何实现?
A:可以通过window.parent.top来获取父页面的顶层窗口对象,然后调用该对象的confirm方法来弹出确认框。具体实现代码如下:
```
if(window.parent.top && 条件为真){
window.parent.top.confirm('确认要执行吗?');
}
```
其中,window.parent.top表示获取父页面的顶层窗口对象,条件为真表示判断条件是否为真,如果为真就弹出确认框。如果条件为假,则不会弹出确认框。
相关问题
如何让父页面的confirm居中显示
您可以使用CSS将confirm对话框居中显示。以下是一种方法:
1. 使用JavaScript创建一个confirm对话框并获取其宽度和高度:
```
var confirmBox = document.createElement('div');
confirmBox.className = 'confirm-box';
confirmBox.innerHTML = 'Are you sure?';
document.body.appendChild(confirmBox);
var boxWidth = confirmBox.offsetWidth;
var boxHeight = confirmBox.offsetHeight;
document.body.removeChild(confirmBox);
```
2. 在CSS中设置.confirm-box类的样式,使其居中显示:
```
.confirm-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 100px;
font-size: 16px;
}
```
3. 在JavaScript中使用创建的confirm对话框:
```
var confirmBox = document.createElement('div');
confirmBox.className = 'confirm-box';
confirmBox.innerHTML = 'Are you sure?';
document.body.appendChild(confirmBox);
// 点击确认按钮
document.querySelector('.confirm-btn').addEventListener('click', function() {
// 确认操作
});
// 点击取消按钮
document.querySelector('.cancel-btn').addEventListener('click', function() {
// 取消操作
});
// 关闭confirm对话框
document.querySelector('.close-btn').addEventListener('click', function() {
document.body.removeChild(confirmBox);
});
```
这样就可以让confirm对话框居中显示了。
用layui帮我写一个表格编辑子页面数据回显
好的,以下是使用 layui 编写表格编辑子页面数据回显的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui表格编辑子页面数据回显示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md8 layui-col-md-offset2">
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['table', 'form'], function(){
var table = layui.table
,form = layui.form;
//第一个实例
table.render({
elem: '#test'
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
layer.alert('编辑行:<br>'+ JSON.stringify(data))
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
});
});
</script>
</body>
</html>
```
希望能对你有所帮助!