例如，半透明阴影遮罩

要为ModalPopupExtender添加半透明阴影，就像官方网站上的案例一样，需要定义一个CSS类，并指派到BackgroundCssClass属性上

半透明背景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;

        }

    

ModalPopupExtender控件主要有两种使用方式：

客户端使用方式和服务器端使用方式。

↘客户端使用方式

客户端使用方式又可以分为两种

A．直接设置OKControlID的方式

ModalPopupExtender控件在使用时必须要设置TargetControlID和PopupControlID这两个属性，我的理解是，对于ExtenderControl而言TargetControlID属性必须指定，否则就不知道在哪个DOM元素上附加客户端行为了。

PopupControlID表示要弹出的仿模式窗口的DOM元素，常见的是Panel控件，这个如果不指定，也没有意义。

有时，在执行上下文中可能要在确认这个模式窗口时，执行一些脚本，则可以设置OnOKScript属性，指明确认时要执行的脚本函数。

B．获取一个ModalPopupBehavior实例的方式。

如果页面上放置了ModalPopupExtender控件则可以用$find方法得到一个ModalPopupBehavior实例，这样就可以调用ModalPopupBehavior实例的任何方法了，如hide、show等，此时客户端的行为可以完全自己控制了。

这种情况下ModalPopupExtender控件必须要设置BehaviorID属性，否则无法用$find方法来获取ModalPopupBehavior实例。

有时，我们会感觉直接调用ModalPopupBehavior实例的方法比较麻烦，可以给ModalPopupBehavior实例添加一些事件，以方便我们添加一些自定义控制，如下图，

我们在编辑一个文本框的内容时，在模式窗弹出之后，同时让CheckBox选中文本框中的值，这是需要一个OnAfterShown事件。

有时在点击确认时，需要验证录入数据的正确性，需要一个OnBeforeOK事件，如果验证不能通过就取消提交。

要实现这样的功能我们需要给ModalPopupExtender控件添加相应属性，我们以OnBeforeOK事件为例说明具体步骤：

第一步，给ModalPopupExtender控件添加OnBeforeOK属性

///

///确认之前发生的事件

///

[DefaultValue（""）]

[ExtenderControlEvent]

[ClientPropertyName（"beforeOK"）]

publicstringOnBeforeOK

{

   get{returnGetPropertyValue（"OnBeforeOK",string.Empty）;}

   set{SetPropertyValue（"OnBeforeOK",value）;}

}

 这里要注意ExtenderControlEventAttribute的使用。

第二步，给ModalPopupBehavior添加相应方法，来订阅、取消相应事件，及触发事件的方法。

add_beforeOK:

function（handler）{

   this.get_events（）.addHandler（'beforeOK',handler）;

},

remove_beforeOK:

function（handler）{

   this.get_events（）.removeHandler（'beforeOK',handler）;

},

raiseBeforeOK:

function（eventArgs）{

   varhandler=this.get_events（）.getHandler（'beforeOK'）;

   if（handler）{

       handler（this,eventArgs）;

   }

}, 

第三步，修改相应方法的代码，触发事件

_onOk:

function（e）{

   varelement=$get（this._OkControlID）;

   if（element&&!

element.disabled）{

       vareventArgs=newSys.CancelEventArgs（）;

       this.raiseBeforeOK（eventArgs）;

       if（!

eventArgs.get_cancel（））{

           if（this.hide（）&&this._OnOkScript）{

               window.setTimeout（this._OnOkScript,0）;

           }

           e.preventDefault（）;

           returnfalse;

       }

   }

},

这里修改了_onOk方法，也可以根据情况修改其他方法。

第四步，使用ModalPopupExtender控件时，为OnBeforeOK属性赋值，此属性为一个脚本函数。

这个函数中，我们可以执行args.set_cancel（true）;从而阻止hide方法和OnOkScript脚本的执行。

客户端使用的方式可以任意发挥，OnOKScript属性挂接的函数完全可以使用Sys.Net.WebRequest发起异步请求，获取服务器端的信息。

↘服务器端使用方式

这种方式与传统的服务器控件的使用方式相同，就是直接调用ModalPopupExtender控件的Show（）方法和Hide（）方法来控制模式窗口的现实与隐藏，其实也是通过在客户端生成这样一句脚本来实现的：

（function（）{

   varfn=function（）{

   AjaxControlToolkit.ModalPopupBehavior.invokeViaServer（'programmaticModalPopupBehavior',true）;

   Sys.Application.remove_load（fn）;

   };

   Sys.Application.add_load（fn）;

}）（）;

在服务器端调用ModalPopupExtender控件的Show（）方法或Hide（）方法有个缺点，就是会引起回发，用户体验不好。

我们可以将弹出的模式窗口（一个panel控件）放到一个UpdatePanel控件中，并将触发按钮注册为异步回发按钮来改善用户体验。

一个常见的例子是GridView配合FormView或者DetailView进行业务对象的修改，页面数据用GridView显示，修改时，用模式窗弹出一个FormView，修改完毕保存到数据库，并更新GridView（当然就地编辑的话，直接用UpdatePanel即可）。

具体实现步骤如下：

第一步：

建立GridView

UpdatePanelUpdateMode="Conditional"ID="upXXXXX"runat="server">

XXGridView id="gvDDDDDD"runat="server"DataKeyNames="Id"AllowSorting="True"skinid="PagingGridView" DataSourceID="ods"EnableViewState="False">

  

      

BoundFieldDataField="CreatedDate"HeaderText="XXXXXX" SortExpression="CreatedTime"/>

      

BoundFieldDataField="CreatedBy"HeaderText="CCCCCC"SortExpression="CreatedBy"/>

      

BoundFieldDataField="Name"HeaderText="CCCCC"/>

      

BoundFieldDataField="Comment"HeaderText="CCCCCC"/>

      

TemplateField>

LinkButtonid="btnEdit"runat="server"CommandName="Select"OnClick="btnEdit_Click">编辑

LinkButton>

TemplateField>

      

CommandFieldShowDeleteButton="True"DeleteText="删除"/>

  

XXGridView>

AsyncPostBackTriggerControlID="btnSave"/>

AsyncPostBackTriggerControlID="btnOK"/>

UpdatePanel>

ObjectDataSourceid="ods"runat="server"EnablePaging="True"

 TypeName="XXXXXX"

 SelectMethod="GetPaged"SelectCountMethod="GetCount"

 SortParameterName="sortExpression"

 DeleteMethod="DeleteById">

        

       

WhereClauseParameterName="whereClause"QueryStringField="id"Type="String"DataField="XXId">

WhereClauseParameter>

   

ObjectDataSource>

第二步：

建立弹出的层，仿模式窗口

PanelID="pnlPopup"runat="server"CssClass="x-pne"Width="460px"style="display:

none;">

UpdatePanelID="updDetail"runat="server"UpdateMode="Conditional">

 

Buttonid="btnShowPopup"runat="server"style="display:

none"/>

ModalPopupExtenderID="mdlPopup"runat="server"

   BehaviorID="xxxEdit"

   TargetControlID="btnShowPopup"

   PopupControlID="pnlPopup"

   CancelControlID="btnClose"BackgroundCssClass="modalBackground"

   PopupDragHandleControlID="pnlDrag"

/>

   

PanelID="pnlDrag"runat="server"CssClass="corner-bgx-pne-ltx-pne-leftdragTitle">

   

    

    

相关搜索

当前位置：首页 > 高中教育 > 其它课程