ModalPopupExtender-控件属性、功能、实例演示和使用方式详解.docVIP

ModalPopupExtender 控件属性、功能、实例演示和使用方式详解 TOC \o 1-3 \h \z \u ? ModalPopupExtender控件功能描述 1 ? ModalPopupExtender控件属性描述 1 ? ModalPopupExtender功能演示实例 1 ? 客户端使用方式 3 ? 服务器端使用方式 6 ModalPopupExtender控件功能描述 以模式窗口的方式弹出客户或服务器控件,以突出显示! 弹出的一般是DIV或PANEL. ModalPopupExtender控件属性描述 TargetControlID : 控制是否弹出的控件的ID. PopupDragHandleControlID : 允许拖拽的控件的ID. PopupControlID: 指定要弹出的控件的ID. BackgroundCssClass: 指定弹出控件后其它内容的样式. DropShadow: 弹出的控件是否有阴影效果. OkControlID: 确认按钮的ID. OnOkScript : 单击［确认］按钮时要执行的脚本方法 CancelControlID :取消按钮的ID. OnCancelScript : 单击［取消］按钮时要执行的脚本方法. X,Y :指定弹出层的位置. RepositionMode : 指示当页面窗口调整大小或滚动时,弹出层是否要进行位置移动. ModalPopupExtender功能演示实例 页面代码 代码 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 h1The 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 例如，半透明阴影遮罩 要为ModalPopupExtender添加半透明阴影，就像官方网站上的案例一样，需要定义一个CSS类，并指派到BackgroundCssClass属性上 半透明背景css可以如下： style type=text/css ??? .modalBackground ???????? { ???????????? position: absolute; ???????????? z-index: 100; ???????????? top: 0px; ???????????? left: 0px; ???????????? background-color: #000; ???????????? filter: alpha(opacity=60); ???????????? -moz-opacity: 0.6; ???????????? opacity: 0.6; ???????? } ???? /style ModalPopupExtender控件主要有两种使用方式：客户端使用方式和服务器端使用方式。 客户端使用方式 客户端使用方式又可以分为两种 A．直接设置OKControlID的方式 ModalP