AjaxToolKit---ModalPopupExtender

时间：2010-09-02 来源：dodo-yufan

1.控件功能描述

以模式窗口的方式弹出客户或服务器控件,以突出显示! 弹出的一般是DIV或PANEL.

2.控件属性描述

TargetControlID : 触发弹出操作的控件ID.

PopupDragHandleControlID : 弹出层中可以拖动的层的控件ID. 就是"标题栏"层ID.

PopupControlID: 要弹出的层的ID.

BackgroundCssClass: 弹出层背景样式.

DropShadow: 是否在弹出层的边缘显示阴影.

OkControlID: 弹出层中确定按钮ID.

OnOkScript : 点击确定按钮的事件.

CancelControlID :弹出层中取消显示弹出层的控件ID.

OnCancelScript : 点击取消按钮的事件.

X,Y :指定弹出层的位置.

RepositionMode : 指示当页面窗口调整大小或滚动时,弹出层是否要进行位置移动.

3.功能演示

3.1 页面代码

代码 <style type="text/css">
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
};
.modalPopup
{
    background-color:White;
    opacity:0;
}
</< span>style>

...

<div>
<asp:Button runat="server" ID="btnViewMore" Text="More" />
        <asp:Panel ID="pnlViewCustomer" runat="server" CssClass="modalPopup" style="display:none;">
            <div style="margin:10px">
                <h1>The service is not available in <span id="Country"></< span>span>.</< span>h1>
                <asp:Button runat="server" ID="viewBox_OK" Text="OK" />
            </< span>div>
        </< span>asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
            TargetControlID="btnViewMore" Drag ="true"
            PopupDragHandleControlID="pnlViewCustomer"
            PopupControlID="pnlViewCustomer"
            BackgroundCssClass="modalBackground"
            DropShadow="false"
            OkControlID="viewBox_OK">
        </< span>ajaxToolkit:ModalPopupExtender>

</< span>div>

4.试验过程中碰到的问题及原因

4.1 弹出层后,并没有屏蔽层以外的控件.

原因:没有设置BackgroundCssClass. 这个CSS是要自己写的. 如例子中的modalBackground.

4.2 设置BackgroundCssClass后,弹出层也显示成灰色.

原因:没有设置弹出层pnlViewCustomer的CSSCLASS. 这个CSS也是要自己写的. 如例子中的modalPopup.

5.总结

5.1 要达到模式弹出的效果,需要设置ModalPopupExtender的BackgroundCssClass样式,并在此样式中加上过滤效果!