【IT168技术文档】

  上一章我们介绍了怎样使用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部分的代码如下：

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