一路向前走

其中的代码,如果您有更好的改进,请一定提出您的宝贵意见及建议

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::
  91 随笔 :: 3 文章 :: 94 评论 :: 0 引用

1.控件功能描述

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

2.控件属性描述

TargetControlID : 控制是否弹出的控件的ID.

PopupDragHandleControlID : 允许拖拽的控件的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;
}
</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样式,并在此样式中加上过滤效果!

 

6.参考文档

http://www.asp.net/ajaxlibrary/act_ModalPopup.ashx

 

posted on 2010-05-17 09:31 Adair 阅读(...) 评论(...) 编辑 收藏