实现方法一：

<!--用js控制显示-->    <script type="text/javascript" language="javascript">        function ShowNo()                        //隐藏两个层        {            document.getElementById("doing").style.display="none";            document.getElementById("divLogin").style.display="none";        }        function $(id)                 {            return (document.getElementById) ? document.getElementById(id) : document.all[id] ;        }        function showFloat()                    //根据屏幕的大小显示两个层        {            var range = getRange();            $('doing').style.width = range.width + "px";            $('doing').style.height = range.height + "px";            $('doing').style.display = "block";            document.getElementById("divLogin").style.display="";        }        function getRange()                      //得到屏幕的大小        {              var top     = document.body.scrollTop;              var left    = document.body.scrollLeft;              var height  = document.body.clientHeight;              var width   = document.body.clientWidth;

              if (top==0 && left==0 && height==0 && width==0)
              {
                top     = document.documentElement.scrollTop;
                left    = document.documentElement.scrollLeft;
                height  = document.documentElement.clientHeight;
                width   = document.documentElement.clientWidth;
              }
              return  {top:top  ,left:left ,height:height ,width:width } ;
        }
    </script>
    <style type="text/css"> 
            body{margin:0px;}
    </style>

<form > 
    <a href="javascript:void(0)" onclick="showFloat()">登陆</a>     //登陆链接
    <!--加一个半透明层-->
    <div >
    </div>   
    <!--加一个登录层-->
    <div >
            <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
                <div>
                    用户：
                  <asp:TextBox ID="TxtUserName" runat="server" > </asp:TextBox>
                </div>
                <div>
                    密码：
                  <asp:TextBox ID="TxtUserPwd" runat="server" TextMode="Password" > </asp:TextBox>
                </div>
                <br/>
                <div>  &nbsp; &nbsp;
                    <asp:Button ID="BttLogin" runat="server" Text=" 登 陆 "/>&nbsp;
                    <input />
                </div>
            </div>
      </div>
    </form>

实现方法二：

使用AjaxToolkit的ModalPopupExtender实现：

1.控件功能描述

以模式窗口的方式弹出客户或服务器控件,以突出显示! 弹出的一般是DIV或PANEL.

2.控件属性描述

TargetControlID : 触发弹出操作的控件ID.

PopupDragHandleControlID : 弹出层中可以拖动的层的控件ID. 就是"标题栏"层ID.

PopupControlID: 要弹出的层的ID.

BackgroundCssClass: 弹出层背景样式.

DropShadow: 是否在弹出层的边缘显示阴影.

OkControlID: 弹出层中确定按钮ID.

OnOkScript : 点击确定按钮的事件.

CancelControlID :弹出层中取消显示弹出层的控件ID.

OnCancelScript : 点击取消按钮的事件.

X,Y :指定弹出层的位置.

RepositionMode : 指示当页面窗口调整大小或滚动时,弹出层是否要进行位置移动

3.功能演示

3.1 页面代码

4.试验过程中碰到的问题及原因

4.1 弹出层后,并没有屏蔽层以外的控件.

原因:没有设置BackgroundCssClass. 这个CSS是要自己写的. 如例子中的modalBackground.

4.2 设置BackgroundCssClass后,弹出层也显示成灰色.

原因:没有设置弹出层pnlViewCustomer的CSSCLASS. 这个CSS也是要自己写的. 如例子中的modalPopup.

5.总结

5.1 要达到模式弹出的效果,需要设置ModalPopupExtender的BackgroundCssClass样式,并在此样式中加上过滤效果!

http://blog.csdn.net/gaoliuchang/archive/2008/08/02/2756630.aspx

本文来自CSDN博客，转载请标明出处：