模式窗口弹出任意页面

首先,建立一个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,内容如下:

<html>
<head>
    <title>父窗口</title>

    <script type="text/javascript" language="javascript" src="ModalPager.js"></script>

    <script language="JavaScript" type="text/javascript">
        //继承ModalPager类,并重写它的ProcessReturnValue方法。
        function myModalPager() {
            this.extend(ModalPager);
            this.ProcessReturnValue = function(returnVals) {
                document.getElementById("txt1").value = returnVals;
            }
        }
    </script>

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

 

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

<html>
<head>
    <title>子窗口</title>

    <script type="text/javascript" language="javascript" src="ModalPager.js"></script>   

</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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值