轻松掌握Ajax.net系列教程七：使用ModalPopupExtender_[Asp.Net教程]
上一章我们介绍了怎样使用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部分的代码如下：
请选择页面风格： onclick="styleToSelect = 'sampleStyleA';" />onclick="styleToSelect = 'sampleStyleB';" />onclick="styleToSelect = 'sampleStyleC';" />onclick="styleToSelect = 'sampleStyleD';" />注意：Panel1要加Style="display: none"，这样它才能正常隐藏和显示，而Panel2的作用是支持拖拽。大家要细细品味一下这两个Panel所扮演的角色。
控件准备好后我们要准备样式表，由于例子的需要，这次的样式比较多，大家可以直接复制以下代码。其中modalBackground是ModalPopup的背景样式，modalPopup是ModalPopup的样式。
.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;}配置完样式后我们还需要定义一个简单的JS函数，用以替换文本的样式，代码如下：
var styleToSelect;function onOk() { get('Paragraph1').className = styleToSelect;}注意：这里的Paragraph1是指文本的载体ID，大家可以用 、
和 等作为文本的载体。例如：
今天天气不错挺风和日丽的
我们下午没有课这天气挺爽的
我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……第二步：配置ModalPopupExtender
我们切换到源代码模式配置ModalPopupExtender，具体代码如下：