轻松掌握Ajax.net系列教程七：使用ModalPopupExtender_[Asp.Net教程]

注意：Panel1要加Style="display: none"，这样它才能正常隐藏和显示，而Panel2的作用是支持拖拽。大家要细细品味一下这两个Panel所扮演的角色。

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

配置完样式后我们还需要定义一个简单的JS函数，用以替换文本的样式，代码如下：

等作为文本的载体。例如：

今天天气不错挺风和日丽的

我们下午没有课这天气挺爽的

我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……

第二步：配置ModalPopupExtender

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

TargetControlID="LinkButton1"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

OkControlID="OkButton"

OnOkScript="onOk()"

CancelControlID="CancelButton"

DropShadow="true"

Drag="true"

PopupDragHandleControlID="Panel2"/>

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.asp.net/learn/ajax-videos/video-85.aspx