ModalPopupExtender控件的使用实例（弹出对话框）
前台：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopup.aspx.cs" Inherits="AJAXEnabledWebApplication1.ModalPopup" %>
<!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>弹出对话框控件</title>
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>
<style type="text/css">
.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:#49591c;
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="sm" runat="server">
</asp:ScriptManager>
<ajaxToolkit:ModalPopupExtender ID="tan" runat="server" TargetControlID="Button1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
DropShadow="true"
Drag="true"
PopupDragHandleControlID="Panel2" />
<asp:Button ID="Button1" runat="server" Text="跟换样式" />
<br /><p id="Paragraph1">
生活就是这么精彩！尽管每天都重复着同样的工作！<br />
但是我的工作充满了挑战！加油 ！继续努力！！ <br />
</p>
<br />
<asp:Panel ID="Panel1" runat="server" Style="display: none">
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Width="309px">
<div>
<p>
请选择页面风格：</p>
<p>
<input type="radio" name="Radio" id="RadioA" checked="checked"
onclick="styleToSelect = 'sampleStyleA';" />
<label for="RadioA" class="sampleStyleA" style="padding: 3px;">风格样式一</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB"
onclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB"
style="padding: 3px;">风格样式二</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC"
onclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC"
style="padding: 3px;">风格样式三</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD"
onclick="styleToSelect = 'sampleStyleD';" />
<label for="RadioD" class="sampleStyleD"
style="padding: 3px;">
风格样式四
</label>
</p>
<p>
<label class="sampleStyleD" for="RadioD" style="padding-right: 3px; padding-left: 3px;
padding-bottom: 3px; padding-top: 3px">
<span style="font-size: 12pt"><span style=""><span style="color: #000000">
</span></span></span>
</label>
<asp:Button ID="OkButton" runat="server" Text="确定" />
<asp:Button ID="CancelButton" runat="server" Text="取消" />
</p>
</div>
</asp:Panel>
</asp:Panel>
</div>
</form>
</body>
</html>
TargetControlID是指ModalPopupExtender的目标控件ID，即激活ModalPopup的控件ID，这里应该是LinkButton1。PopupControlID是指Popup载体控件的ID，这里应该是Panel1，关于Popup载体的解析请参照“轻松掌握Ajax.net系列教程六：使用PopupControlExtender”。BackGroundCssClass是指ModalPopup的背景样式，前面已经提过，应该是modalBackground。OkControlID是指确定控件的ID，这里是OkButton。OnOkScript是指当用户确定后所执行的JS脚本，在前面我们已经定义了onOK函数，用于改变文本的样式。注意：这里的语法一定要严格遵守Js的书写格式。CancelControlID是指取消控件的ID，这里应该是CancelButton。DropShadow是指是否留下阴影。Drag是指是否支持拖拽。PopupDragHandleControlID是指可拖拽的控件ID，前面已经提过了，应该是Panel2。
总结：本章主要介绍了ModalPopupExtender的使用方法，它的用法和PopupControlExtender类似，但也有不同。PopupControlExtender可以使用UpdatePanel调用服务器组件返回所需要的值，而ModalPopupExtender只能调用客户端JS脚本。大家要理解两个组件的相同之处和关键的区别，以免互相混淆
浙公网安备 33010602011771号