AJAX Control Toolkit——ModalPopupExtender（弹出对话框&蒙板）

ModalPopupExtender，该控件的直观效果就是，当单击页面上的关联的控件时弹出对话框的同时页面出现蒙板效果，通过确定（执行一定的操作）和取消返回原页面。其实博客园“插入代码”就有点类似该控件。

TargetControlID -激活弹出框的元素的ID
PopupControlID - 弹出控件的ID
BackgroundCssClass - 当弹出对话框时，背景的CSS样式
DropShadow - 值为True时，自动为弹出的对话框添加阴影
OkControlID - The ID of the element that dismisses the modal popup.
OnOkScript - The script to run when the modal popup is dismissed using the element specified in OkControlID.
CancelControlID - The ID of the element that cancels the modal popup.
OnCancelScript - The script to run when the modal popup is dismissed using the element specified in CancelControlID.
PopupDragHandleControlID - The ID of the embedded element that contains the popup header and title that will be used as a drag handle.
X - The X coordinate of the top left corner of the modal popup. If this value is not specified, the popup will be centered horizontally.
Y - The Y coordinate of the top left corner of the modal popup. If this value is not specified, the popup will be centered vertically.
RepositionMode - A value that determines whether the popup must be repositioned when the window is resized or scrolled.

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title>ModalPopup</title>
 7     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />    
 8     <script type="text/javascript">
 9     var styleToSelect;
10     function onOk() {
11     document.getElementById('Paragraph1').className = styleToSelect;
12     }
13 </script>
14 </head>
15 <body>
16 <form id="form1" runat="server">
17 <asp:ScriptManager ID="ScriptManager1" runat="server">
18 </asp:ScriptManager>
19 <br />
20 <asp:LinkButton ID="LinkButton1" runat="server">Please click to select an alternate text style.</asp:LinkButton><br />
21 <br />
22 <div>
23    <p id="Paragraph1">
24      <a href="http://joeon.net"><span style="color: #3366cc">Joe Stagner</span></a>,
25       a member of the Microsoft product team, builds a CascadingDropDown sample application
26       that demonstrates two fundamental benefits of AJAX-enabled web applications, namely
27       web service integration and asynchronous page updates.
28    </p>
29    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none" Width="233px">
30    <p id="title">Choose the style you would like:</p>
31    <input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio" />
32    <label class="sampleStyleA" for="RadioA">Choose THIS Style.</label><br />
33    <input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio" />
34    <label class="sampleStyleB" for="RadioB">Choose THIS Style.</label><br />
35    <input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio" />
36    <label class="sampleStyleC" for="RadioC">Choose THIS Style.</label><br />
37    <input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio" />
38    <label class="sampleStyleD" for="RadioD">Choose THIS Style.</label><br />
39    <br />
40    <div align="center">
41       <asp:Button ID="OkButton" runat="server" Text="OK" />
42       <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
43    </div>
44    </asp:Panel>
45    <br />
46    
47    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
48              TargetControlID="LinkButton1"
49              PopupControlID="Panel1"
50              BackgroundCssClass="modalBackground"
51              DropShadow="true"
52              OkControlID="OkButton"
53              OnOkScript="onOk()"
54              CancelControlID="CancelButton"
55               />
56    </div>
57 </form>
58 </body>
59 </html>

CSS>>

.watermark {
    background: #FFAAFF;
}

.popupControl {
    background-color:#AAD4FF;
    position:absolute;
    visibility:hidden;
    border-style:solid;
    border-color: Black;
    border-width: 2px;
}

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}

.sampleStyleA {
    background-color:#FFF;
}

.sampleStyleB {
    background-color:#FFF;
    font-family:monospace;
    font-size:10pt;
    font-weight:bold;
}

.sampleStyleC {
    background-color:#ddffdd;
    font-family:sans-serif;
    font-size:10pt;
    font-style:italic;
}

.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}