AjaxToolKit学习笔记 之 ModalPopupExtender

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 页面代码

 

代码

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--&gt < style  type ="text/css" >
.modalBackground  {
    background-color : Gray ;
    filter : alpha(opacity=50) ;
    opacity : 0.5 ;
} ;
.modalPopup 
{
    background-color : White ;
    opacity : 0 ;
}
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 > . h1 >
                 < asp:Button  runat ="server"  ID ="viewBox_OK"  Text ="OK"   />
             div >
         asp:Panel >  
         < ajaxToolkit:ModalPopupExtender  ID ="ModalPopupExtender2"  runat ="server"  
            TargetControlID ="btnViewMore"  Drag  ="true"
            PopupDragHandleControlID ="pnlViewCustomer"  
            PopupControlID ="pnlViewCustomer"
            BackgroundCssClass ="modalBackground"
            DropShadow ="false"
            OkControlID ="viewBox_OK" >
         ajaxToolkit:ModalPopupExtender >

div >

 

 

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

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

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

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

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

5.总结

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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/12639172/viewspace-662877/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/12639172/viewspace-662877/