在子页面的弹出dialog 怎么做可以遮罩父层

qq_23172683 2015-12-18 10:35:13
我在easui 中通过tab+iframe布局,现在是在子页面的弹出dialog 不能够遮罩父层,有有什么办法可以解决呢!
...全文
1994 点赞 收藏 8
写回复
8 条回复
qq_23172683 2015年12月21日
引用 7 楼 apollokk 的回复:
调用弹窗时把当前页面作为对象传过去 父页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../JS/jquery-easyui-1.4/themes/gray/easyui.css" rel="stylesheet" />
</head>
<body>
    <iframe src="callParentDialog.html" style="width: 300px; height: 200px; border: 1px green solid;"></iframe>
    <div style="display: none;">
        <div id="dialog">
            <input id="test" type="text" value="这里的值将传回去" />
        </div>
    </div>
</body>
</html>
<script src="../JS/jquery-easyui-1.4/jquery.min.js"></script>
<script src="../JS/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript">
    function openDialog(callback, setText) {
        $('#dialog').dialog({
            title: '弹窗示例,关闭后回写数据',
            onClose: function () {
                //这里回传一个对象回去,也可以传单个的值啥的
                callback({ returnValue: document.getElementById('test').value });
                setText.value = "从父页面回去子页面对象";
            },
            modal:true
        });
    }
</script>
子页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <input type="button" value="打开窗体" onclick="openDig();"/><br/>
    接收后回写值:<input id="ret" type="text" /><br/>
    父页面写入值:<input id="getText" type="text" />
</body>
</html>
<script type="text/javascript">
    function openDig() {
        parent.openDialog(function (v) {
            document.getElementById('ret').value = v.returnValue;
        }, document.getElementById('getText'));
    }
</script>
效果图: 初始页面: 弹窗效果: 弹窗关闭后:
谢谢了,写的这么详细。
回复 点赞
Hello World, 2015年12月19日
调用弹窗时把当前页面作为对象传过去
父页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../JS/jquery-easyui-1.4/themes/gray/easyui.css" rel="stylesheet" />
</head>
<body>
<iframe src="callParentDialog.html" style="width: 300px; height: 200px; border: 1px green solid;"></iframe>
<div style="display: none;">
<div id="dialog">
<input id="test" type="text" value="这里的值将传回去" />
</div>
</div>
</body>
</html>
<script src="../JS/jquery-easyui-1.4/jquery.min.js"></script>
<script src="../JS/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript">
function openDialog(callback, setText) {
$('#dialog').dialog({
title: '弹窗示例,关闭后回写数据',
onClose: function () {
//这里回传一个对象回去,也可以传单个的值啥的
callback({ returnValue: document.getElementById('test').value });
setText.value = "从父页面回去子页面对象";
},
modal:true
});
}
</script>


子页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<input type="button" value="打开窗体" onclick="openDig();"/><br/>
接收后回写值:<input id="ret" type="text" /><br/>
父页面写入值:<input id="getText" type="text" />
</body>
</html>
<script type="text/javascript">
function openDig() {
parent.openDialog(function (v) {
document.getElementById('ret').value = v.returnValue;
}, document.getElementById('getText'));
}
</script>

效果图:
初始页面:

弹窗效果:

弹窗关闭后:
回复 点赞
江小鱼NO1 2015年12月19日
父页面添加遮罩,但是遮罩不要覆盖子页面,也就父页面与子页面拼出来一个整个的遮罩
回复 点赞
木头海上漂 2015年12月18日
最好在主页面写一个回调函数,需要的时候调用主页面回调函数生成或者取消遮盖层
回复 点赞
qq_23172683 2015年12月18日
引用 1 楼 zzgzzg00 的回复:
将子页面弹框的dom移到父页面上 parent.document.body.appendChild 或者弹窗在父页面 子页面调
可以写成一个通用的吗?
回复 点赞
qq_23172683 2015年12月18日
引用 2 楼 hch126163 的回复:
在父页面 添加 遮罩 层
具体怎么写呢! 我的写法是在父页面写了一个div 子页面 top.$('#text').dialog()但是 取值的时候都要加上top感觉不方便。所以想看看有什么更好的方法。
回复 点赞
hch126163 2015年12月18日
在父页面 添加 遮罩 层
回复 点赞
似梦飞花 2015年12月18日
将子页面弹框的dom移到父页面上 parent.document.body.appendChild 或者弹窗在父页面 子页面调
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告