Asp.net弹出层并且有遮罩层

实现方法一：

<!--用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 id="form1" runat="server"> 
    <a href="javascript:void(0)" onclick="showFloat()">登陆</a>     //登陆链接
    <!--加一个半透明层-->
    <div id="doing"  style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
    </div>   
    <!--加一个登录层-->
    <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:780px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;">
            <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 id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" />
                </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 页面代码

<style type="text/css">
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
};
.modalPopup 
{
    background-color:White;
    opacity:0;
}
style>

...

<div>
<asp:Button runat="server" ID="btnViewMore" Text="More" />
        <asp:Panel ID="pnlViewCustomer" runat="server" CssClass="modalPopup" style="display:none;"> 
            <div style="margin:10px">
                <h1>The service is not available in <span id="Country">span>.h1>
                <asp:Button runat="server" ID="viewBox_OK" Text="OK" />
            div>
        asp:Panel> 
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" 
            TargetControlID="btnViewMore" Drag ="true"
            PopupDragHandleControlID="pnlViewCustomer" 
            PopupControlID="pnlViewCustomer"
            BackgroundCssClass="modalBackground"
            DropShadow="false"
            OkControlID="viewBox_OK">
        ajaxToolkit:ModalPopupExtender>
div>

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博客，转载请标明出处：