【原创】ASP.NET的模态窗口

对于开发过WinForm程序的人员来说，模态窗口就是ShowDialog()就可以弹出一个窗口，可是对于ASP.net咱们应该怎么做呢，那就是showModalDialog或是showModelessDialog，两者定义如下：

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。 (IE 4+ 支持)
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 (IE 5+ 支持)

文章的内容如下：

（1）showModalDialog的定义

（2）showModalDialog一般使用

（3）解决回发子窗口事件时又弹出窗口问题

（4）解决子窗口向父窗口传值问题

(5) 解决子窗口缓存问题

开始

一：showModalDialog的定义

window.showModalDialog(sURL [, vArguments] [, sFeatures])

参数说明：
sURL
　　必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
　　可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
　　可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
　　dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　　dialogWidth: 对话框宽度。
　　dialogLeft: 距离桌面左的距离。
　　dialogTop: 离桌面上的距离。
　　center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　　status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
　　scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。
　　dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
　　edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
　　unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

二：showModalDialog一般使用

说了半天定义，就直接来个简单的例子试试吧。

新建立一个项目Parent_Form.aspx,前台代码如下：

<head runat="server">
    <title>父窗口</title>
    
    <script type="text/javascript">

        function OpenSelectInfo() {
      var width = 1000;  //模态窗口的宽度
            var height = 500;   //模态窗口的高度
            var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan"; //模态窗口的url地址
            window.showModalDialog(url, null, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status:no');
            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>        
         <input type="button" id="btn_ModifyNickName" runat="server" value="打开模态窗口"  style=" 126px;" onclick="OpenSelectInfo()" />   
          
    </div>
    </form>
</body>
</html>

相关内容的注释已经写的很明白。这个窗口要打开ModalDialog_SelectInfo.aspx作为一个模态窗口，那么我就建立这个模态窗口吧。

<head runat="server">
    <title>子窗口</title>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <center>
            <table>
                <tr>
                    <td>
                       用户名:
                    </td>
                    <td>
                        <input type="text" id="txtUserName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        密码:
                    </td>
                    <td>
                        <input type="text" id="txtPwd" runat="server" />
                    </td>
                 </tr>
                 <tr>
                    <td>
                        安全信息
                    </td>
                    <td>                     
                        <label runat="server" id="lblPass">1345451057450</label>
                        <input type="text" id="txtPass" runat="server" style="display:none;" value="1345451057450" />
                    </td>
                 </tr>
                 <tr>
                    <td colspan="2">
                        <asp:Button runat="server" ID="btn_Submit" Text="保 存" 
                            onclick="btn_Submit_Click" />
                        <input type="button" id="btn_Close" value="关 闭" onclick="javascript:window.close();" />
                    </td>   
                 </tr>
                
            </table>
        </center>
    </div>
    </form>
</body>
</html>

内容也是非常的简单，没什么好说的了。当我们打开第一个窗口Parent_Form.aspx中的按扭会弹出ModalDialog_SelectInfo.aspx这个窗口

三：解决回发子窗口事件时又弹出窗口问题

上面我们的ModalDialog_SelectInfo.aspx窗口中有个保存按扭，你单击一下，会出现什么情况，会弹出新的窗口。显然这不是我们想要的。解决办法如下。

在<Head></Head>中间加上 <base target="_self" />就可以了。接着上面的ModalDialog_SelectInfo.aspx修改如下：

<head runat="server">
    <title>子窗口</title>
    <base target="_self" /> <%--解决弹出新窗口问题--%>
</head>

四：解决子窗口向父窗口传值问题
解释一下，就是子窗口操作完成后，要告诉父窗口一些信息，这些信息怎么传递给我们的父窗口（Parent_Form.aspx）呢。那就是使用关键字returnValue,为了测试我们在ModalDialog_SelectInfo.aspx页面中加一个按扭

它调用的函数retunBack内容如下：

<script type="text/javascript">
        function retunBack() {
            returnValue = "1001,1002";
            window.close();
        }
  
    </script>

我们的Parent_Form.aspx代码如下：

<title>父窗口</title>
    
    <script type="text/javascript">

        function OpenSelectInfo() {

            var width = 1000;  //模态窗口的宽度
            var height = 500;   //模态窗口的高度
            var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan"; //模态窗口的url地址
            var rCode =window.showModalDialog(url, null, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status:no');
            alert(rCode);
        }
    </script>

试试吧，是不是已经弹出你想返回的结果了。

五：解决子窗口缓存问题

在实际使用中，我们往往要在模态窗口ModalDialog_SelectInfo.aspx中处理一些逻辑，就是接收父窗口的参数，根据参数不同给出不同的操作，但是showModalDialog缓存很严重，你调用一次后，再调用时，它会直接取缓存的数据，不会回发服务器，从而不会执行你服务器端的代码。如何解决这个问题呢，方法也很多。

第一种方法：在我们模态窗口中加入代码如下，红色部分

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalDialog_SelectInfo.aspx.cs" Inherits="showModalDialog_Test.ModalDialog_SelectInfo" %>
<%@ OutPutCache Location="None"%>

第二种方法：客户端取消

第三种方法：在URL中加入随机数

var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan&rom=" +随机数 ; //模态窗口的url地址

等等方法。不再一一举例，感兴趣的可以在网上找找相关文档。

欢迎转载，转载请标注原创地址