[转]轻松掌握Ajax.net系列教程七：使用ModalPopupExtender

上一章我们介绍了怎样使用PopupControlExtender，本章我们介绍ModalPopupExtender的使用方法。大家从名字就能看出这两个组件很相似，因此它们的使用方法也是大同小异的。上一章有关PopupControlExtender的介绍有很大部分也适用于ModalPopupExtender，只是它们所产生的效果不同而已，但机制是类似的，因此在本章不再重复介绍一些关键名词，我们只简单介绍ModalPopupExtender的使用方法。如有疑问请查看：轻松掌握Ajax.net系列教程六：使用PopupControlExtender 。

第一步：建立AJAX Control Toolkit Web Site

要使用ModalPopupExtender我们要使用AJAX Control Toolkit Web Site模板。本例子是演示怎样使用ModalPopup来修改我们的页面风格。建立好网站后我们需要以下控件：N个Panel控件作为Popup载体、一个LinkButton控件用于激活ModalPopup窗口、一个RadioButtonList控件用于选择样式、一段文本、两个Button控件用于确定或取消和一个ModalPopupExtender组件，如下图所示：



其中Panel部分的代码如下：

[align=left]<asp:Panel ID="Panel1" runat="server" Style="display: none">[/align]
[align=left] <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Width="309px">[/align]
[align=left] <div>[/align]
[align=left] <p>[/align]
[align=left] 请选择页面风格：</p>[/align]
[align=left] <p>[/align]
[align=left] <input type="radio" name="Radio" id="RadioA" checked="checked"[/align]
[align=left] onclick="styleToSelect = 'sampleStyleA';" />[/align]
[align=left] <label for="RadioA" class="sampleStyleA" style="padding: 3px;">风格样式一</label>[/align]
[align=left] </p>[/align]
[align=left] <p>[/align]
[align=left] <input type="radio" name="Radio" id="RadioB"[/align]
[align=left] onclick="styleToSelect = 'sampleStyleB';" />[/align]
[align=left] <label for="RadioB" class="sampleStyleB"[/align]
[align=left] style="padding: 3px;">风格样式二</label>[/align]
[align=left] </p>[/align]
[align=left] <p>[/align]
[align=left] <input type="radio" name="Radio" id="RadioC"[/align]
[align=left] onclick="styleToSelect = 'sampleStyleC';" />[/align]
[align=left] [/align]
[align=left] <label for="RadioC" class="sampleStyleC"[/align]
[align=left] style="padding: 3px;">风格样式三</label>[/align]
[align=left] [/align]
[align=left] </p>[/align]
[align=left] <p>[/align]
[align=left] <input type="radio" name="Radio" id="RadioD"[/align]
[align=left] onclick="styleToSelect = 'sampleStyleD';" />[/align]
[align=left] <label for="RadioD" class="sampleStyleD"[/align]
[align=left] style="padding: 3px;">[/align]
[align=left] 风格样式四[/align]
[align=left] </label>[/align]
[align=left] </p>[/align]
[align=left] <p>[/align]
[align=left] <label class="sampleStyleD" for="RadioD" style="padding-right: 3px; padding-left: 3px;[/align]
[align=left] padding-bottom: 3px; padding-top: 3px">[/align]
[align=left] <span style="font-size: 12pt"><span style=""><span style="color: #000000">[/align]
[align=left] </span></span></span>[/align]
[align=left] </label>[/align]
[align=left] <asp:Button ID="OkButton" runat="server" Text="确定" />[/align]
[align=left] <asp:Button ID="CancelButton" runat="server" Text="取消" />[/align]
[align=left] </p>[/align]
[align=left] </div>[/align]
[align=left] </asp:Panel>[/align]
</asp:Panel>
注意：Panel1要加Style="display: none"，这样它才能正常隐藏和显示，而Panel2的作用是支持拖拽。大家要细细品味一下这两个Panel所扮演的角色。

控件准备好后我们要准备样式表，由于例子的需要，这次的样式比较多，大家可以直接复制以下代码。其中modalBackground是ModalPopup的背景样式，modalPopup是ModalPopup的样式。

[align=left].modalBackground {[/align]
[align=left] background-color:Gray;[/align]
[align=left] filter:alpha(opacity=70);[/align]
[align=left] opacity:0.7;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].modalPopup {[/align]
[align=left] background-color:#ffffdd;[/align]
[align=left] border-width:3px;[/align]
[align=left] border-style:solid;[/align]
[align=left] border-color:Gray;[/align]
[align=left] padding:3px;[/align]
[align=left] width:250px;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].sampleStyleA {[/align]
[align=left] background-color:#FFF;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].sampleStyleB {[/align]
[align=left] background-color:#FFF;[/align]
[align=left] font-family:monospace;[/align]
[align=left] font-size:10pt;[/align]
[align=left] font-weight:bold;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].sampleStyleC {[/align]
[align=left] background-color:#ddffdd;[/align]
[align=left] font-family:sans-serif;[/align]
[align=left] font-size:10pt;[/align]
[align=left] font-style:italic;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].sampleStyleD {[/align]
[align=left] background-color:Blue;[/align]
[align=left] color:White;[/align]
[align=left] font-family:Arial;[/align]
[align=left] font-size:10pt;[/align]
[align=left]}[/align]
配置完样式后我们还需要定义一个简单的JS函数，用以替换文本的样式，代码如下：

[align=left]<script type="text/javascript">[/align]
[align=left]var styleToSelect;[/align]
[align=left]function onOk() {[/align]
[align=left] $get('Paragraph1').className = styleToSelect;[/align]
[align=left]}[/align]
[align=left]</script>[/align]
注意：这里的Paragraph1是指文本的载体ID，大家可以用<p>、<span>和<div>等作为文本的载体。例如：

[align=left]<p id="Paragraph1">[/align]
[align=left] 今天天气不错挺风和日丽的<br />[/align]
[align=left]我们下午没有课这天气挺爽的 <br />[/align]
[align=left]我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……[/align]
[align=left]</p>[/align]
第二步：配置ModalPopupExtender

我们切换到源代码模式配置ModalPopupExtender，具体代码如下：

[align=left]<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"[/align]
[align=left] TargetControlID="LinkButton1"[/align]
[align=left] PopupControlID="Panel1"[/align]
[align=left] BackgroundCssClass="modalBackground"[/align]
[align=left] OkControlID="OkButton"[/align]
[align=left] OnOkScript="onOk()"[/align]
[align=left] CancelControlID="CancelButton"[/align]
[align=left] DropShadow="true"[/align]
[align=left] Drag="true"[/align]
[align=left] PopupDragHandleControlID="Panel2"/>[/align]
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。

到了这里一切已经设置完毕了，运行！效果如下图：



选择好样式后确定，ModalPopup消失，文本的样式发生改变。



结束：

本章主要介绍了ModalPopupExtender的使用方法，它的用法和PopupControlExtender类似，但也有不同。PopupControlExtender可以使用UpdatePanel调用服务器组件返回所需要的值，而ModalPopupExtender只能调用客户端JS脚本。大家要理解两个组件的相同之处和关键的区别，以免互相混淆。

引用地址：http://www.falaosao.net/article.asp?id=118