1.控件功能描述

以模式窗口的方式彈出客戶或服務器控件,以突出顯示! 彈出的一般是DIV或PANEL.

2.控件屬性描述

TargetControlID : 控制是否彈出的控件的ID.

PopupDragHandleControlID : 允許拖拽的控件的ID.

PopupControlID: 指定要彈出的控件的ID.

BackgroundCssClass: 指定彈出控件后其它內容的樣式.

DropShadow: 彈出的控件是否有陰影效果.

OkControlID: 確認按鈕的ID.

OnOkScript : 單擊［確認］按鈕時要執(zhí)行的腳本方法

CancelControlID :取消按鈕的ID.

OnCancelScript : 單擊［取消］按鈕時要執(zhí)行的腳本方法.

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樣式,并在此樣式中加上過濾效果!

?

6.參考文檔

http://www.asp.net/ajaxlibrary/act_ModalPopup.ashx

?

轉載于:https://www.cnblogs.com/msnadair/archive/2010/05/17/1737084.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的AjaxToolKit学习笔记 之 ModalPopupExtender的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。