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部落格，轉載請標明出處：