模式窗口弹出任意页面

最新推荐文章于 2022-07-20 10:03:50 发布

jklkjz

最新推荐文章于 2022-07-20 10:03:50 发布

阅读量875

点赞数

文章标签： function button javascript iframe hyperlink callback

本文链接：https://blog.csdn.net/jklkjz/article/details/4369297

版权

首先，建立一个ModalPager.js文件，内容如下：

/***模式窗口类***/

function ModalPager() {
    /**
     * 父窗口弹出子窗口的方法，直接调用。
     * url：弹出的目标页面
     * w：弹出页面的宽度
     * h：弹出页面的高度
     * isScroll：是否带滚动条
     */
    this.ShowDialog = function(url, w, h, isScroll) {
        if (w == undefined || w == null)
            w = 400;
        if (h == undefined || h == null)
            h = 300;
        if (isScroll == undefined || isScroll == null)
            isScroll = false;
        var param = "dialogWidth:" + w + "px;dialogHeight:" + h + "px;scroll:" + (isScroll ? "yes" : "no") + ";status:no;resizable:no";
        return window.showModalDialog(url, this.ProcessReturnValue, param);
    }

    /**
     * 子窗口回传值给父窗口的方法，直接调用，执行完后子窗口关闭。
     * returnVals：子窗口要回传的值
     */
    this.SendReturnValue = function(returnVals) {
        var callback = window.dialogArguments;
        callback(returnVals);
        window.close();
    }

    /**
     * 父窗口处理子窗口回传值的方法，不能直接调用，需要重写其处理逻辑。
     * returnVals：父窗口接收到的回传值
     */
    this.ProcessReturnValue = function(returnVals) {
        alert('请重写当子窗口关闭时父窗口如何处理回传值的方法！');
    }
}

Object.prototype.extend = function(SuperClass) {
    this.SuperClass = SuperClass;
    this.SuperClass();
    this.superClass = new SuperClass();
}

然后，建立父窗口测试页面Parent.html，内容如下：

</head>
<body>
    <form id="form1">
        <input id="txt1" type="text" /> <input type="button" value="弹出子窗口" οnclick="new myModalPager().ShowDialog('Child.aspx',300,200,true);" />
        </div>
    </form>
</body>
</html>

再次，建立子窗口测试页面Child.html，内容如下：

</head>
<body>
    <form id="form1">
        <input id="Button1" type="button" value="男" οnclick="new ModalPager().SendReturnValue(this.value);" />
        <input id="Button2" type="button" value="女" οnclick="new ModalPager().SendReturnValue(this.value);" />
    </form>
</body>
</html>

最后，运行Parent.html测试一下，就ok了。

注意：<1>为了不让点击模式窗口中的链接时会打开新窗口，应该在新窗口中的<head>标签中加上<base target="_self" />即可

<2>如果使用showModalDialog打开一个页面B.aspx, B页面有个超级链接可以提供文件的下载,可是无论怎么点击,页面都没有反应,也不能下载.如果使用HyperLink 打开新页面的话,会弹出一个新的窗口解决方案:使用iframe

在下载链接上加上添点东西：<a href="abc.aspx" target="iframe1">下载</a>，然后在页面上加上一个看不见的iframe：<iframe name="ifrTarget" id="ifrTarget" width="0" height="0"></iframe>