AjaxControltoolkit学习笔记—ModalPopup使用详解

 

2008-03-01 21:47

十七．ModalPopup

ModalPopup 控件允许将 Web 页面中的一个部分以视窗程序中的“模式”形式显出来，起到提示用户操作和避免对页面中其它部分的误操作的作用。

“模式”的内容可以是任意一个 Control 类的派生控件，开发人员可以指定当它被“模式”显示的时候的背景的显示样式。

当一个页面控件被“模式”显示的时候，只有其内部的内容可以被用户操作，当且仅当用户点击了“确定”或者“取消”按钮以后，这种状态才会被解除。

开发人员可以很方便地自定义“模式”内容被显示或者关闭的触发事件，如果需要页面进行提交，最简单的办法就是让模式部分中“确定”或者“取消”按钮触发提交事件。

另外，开发人员还可以通过X和Y属性指定“模式”内容的显示的绝对坐标位置，这两个值被默认为窗口的正中。

ModalPopup 属性

上面例子中的 ModalPopup 控件属性将被初始化如下面的示例代码所示。为了避免在页面打开时候的闪动，“模式”的部分被设置为Display=none。 斜体属性为可选。

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
            TargetControlID="LinkButton1"
            PopupControlID="Panel1"
            BackgroundCssClass="modalBackground"
            DropShadow="true"
            OkControlID="OkButton"
            OnOkScript="onOk()"
            CancelControlID="CancelButton"
            PopupDragHandleControlID="Panel3" />

• TargetControlID - 触发“弹出”事件的控件 ID
• PopupControlID - “模式”部分的控件 ID，多为 Panel
• BackgroundCssClass - “模式”显示时的背景 Css 样式
• DropShadow - 设置为 True 将自动在“模式”部分增加背景阴影立体效果
• OkControlID - 解除“模式”的控件　ID
• OnOkScript - 当通过　OkControlID　解除“模式”时的脚本代码
• CancelControlID - 取消“模式”的控件　ID
• OnCancelScript - 当通过　OkCancelID　解除“模式”时的脚本代码
• PopupDragHandleControlID - 可以用来拖拽“模式”部分的控件 ID
• X - 弹出“模式”时的 X 坐标
• Y - 弹出“模式”时的 Y 坐标