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

qq_23172683 2015-12-18 10:35:13

我在easui 中通过tab+iframe布局，现在是在子页面的弹出dialog 不能够遮罩父层，有有什么办法可以解决呢！

...全文

2449 8 打赏收藏转发到动态举报

写回复

用AI写文章

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>