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;
}