??????ModalPopupExtender控件用于設置網頁上文本的樣式。

下面看一個示例：

1)在Vs2005中新建一個ASP.NET AJAX-Enabeld Web Project項目工程，命名為ModalPopupExtender1。

2)在Default.aspx中的<div/>標簽中添加一段文字。再添加一個LinkButton控件，用于觸發控制樣式面板生成。

3)然后再頁面上添加一個Panel，命名為Panel1，作為彈出面板。在Panel1中添加一個Panel，命名為Panel2，作為控制拖動的控件。最后在Panel1中添加4個Radio控件，用于提供不同的樣式。

代碼如下：
?1<asp:Panel?ID="Panel1"?runat="server"?BorderColor="DeepSkyBlue"?BorderWidth="1px"
?2????????????Height="278px"?HorizontalAlign="Center"?Width="420px"?style="display:none;"?CssClass="modalPopup">
?3????????????<asp:Panel?ID="Panel2"?runat="server"?BorderColor="Orange"?BorderWidth="1px"?Height="25px"
?4????????????????HorizontalAlign="Center"?style="margin:top?4px;cursor:move;"?Width="409px"?>
?5????????????????Choose?the?paragraph?style?you?would?like:</asp:Panel>
?6????????????<br?/>
?7????????????<div?style="width:420px;text-align:left">
?8????????????<p?class="sampleSytleA"><input?id="Radio1"?name="styleSelect"?checked="checked"?type="radio"?onclick="styleToSelect='sampleStyleA'"?/>Sample?paragraph?text</p>
?9????????????<p?class="sampleStyleB"><input?id="Radio2"?name="styleSelect"?type="radio"?onclick="styleToSelect='sampleStyleB'"?/>Sample?paragraph?text</p>
10????????????<p?class="sampleStyleC"><input?id="Radio3"?name="styleSelect"?type="radio"?onclick="styleToSelect='sampleStyleC'"?/>Sample?paragraph?text</p>
11????????????<p?class="sampleStyleD"><input?id="Radio4"?name="styleSelect"?type="radio"?onclick="styleToSelect='sampleStyleD'"?/>Sample?paragraph?text</p>
12????????????</div>
13????????????<div?style="text-align:center">
14????????????????<asp:Button?ID="OkButton"?runat="server"?Text="OK"?/>
15????????????????<asp:Button?ID="CancelButton"?runat="server"?Text="Cancel"?/>
16????????????</div>
17????????</asp:Panel>
4)在頁面上添加一個ModalPopupExtender，并設置一些屬性。

代碼如下：
1????????<cc1:modalpopupextender?id="ModalPopupExtender1"?TargetControlID="LinkButton1"
2?????????OkControlID="OkButton"?OnOkScript="onOk()"?CancelControlID="CancelButton"??PopupDragHandleControlID="Panel2"?DropShadow="true"?PopupControlID="Panel1"?BackgroundCssClass="modalBackground"??runat="server"></cc1:modalpopupextender>
3
屬性說明：

??????TargetControlID：用于觸發彈出面板的控件。
??????OkControlID：彈出面板中的確認按鈕，用于確認新的樣式。
?????? OnOkScript：當單擊確認按鈕后，關閉樣式面板后，執行腳本。
??????CancelControlID：樣式面板中的取消按鈕，用于取消應用樣式。
??????PopupDragHandleControlID：樣式面板中用于觸發面板的控件。
??????DropShadow：樣式面板是否有陰影。值為True，則有陰影；值為False，則沒有陰影。
??????BackgroundCssClass：樣式面板中應用的css樣式。

5)在頁面中添加腳本，用于處理彈出面板中樣式選擇。

代碼如下：
1????????var?styleToSelect;
2????????function?onOk()
3????????{
4????????????$get("text").className=styleToSelect;
5????????}
6)按下CTRL+F5,在瀏覽器中查看效果。

效果圖如下：

轉載于:https://www.cnblogs.com/qc1984326/archive/2007/03/20/681627.html

總結

以上是生活随笔為你收集整理的AJAX ControlToolkit学习日志-ModalPopupExtender(16)的全部內容，希望文章能夠幫你解決所遇到的問題。

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