说明:新建一个ASP.NET AJAX--Enabled Web Site(也可以自已配置Web.config), COPY以下代码即可看到效果。
以下是实例代码:
-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="modalPopup.aspx.cs" Inherits="modalPopup" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>modalPopup入门</title>
<style type="text/css">
/*Modal Popup*/
.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;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>
<div class="demoarea">
<div class="demoheading">ModalPopup Demonstration</div><p id="Paragraph1">"ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. " +
"This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. " +
"In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. " +
"And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. " +
"However, AJAX isn't just for ASP.NET. " +
"You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. ";
</p>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>
<p>Choose the paragraph style you would like:</p>
</div>
</asp:Panel>
<div>
<p>
<input type="radio" name="Radio" id="RadioA" checked="checked"
οnclick="styleToSelect = 'sampleStyleA';" />
<label for="RadioA" class="sampleStyleA"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB"
οnclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC"
οnclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD"
οnclick="styleToSelect = 'sampleStyleD';" />
<label for="RadioD" class="sampleStyleD"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
DropShadow="true"
PopupDragHandleControlID="Panel3" />
</div>
</form>
</body>
</html> -
介绍一下ModalPopup的基本属性:
- TargetControlID - The ID of the element that activates the modal popup
- PopupControlID - The ID of the element to display as a modal popup
- BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
- DropShadow - True to automatically add a drop-shadow to the modal popup
- OkControlID - The ID of the element that dismisses the modal popup
- OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
- OkCancelID - The ID of the element that cancels the modal popup
- OkCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
- PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
- X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
- Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)