ModalPopupExtender使用技巧( operate ModalPopupExtender by JavaScript)

 

ModalPopupExtender是个非常好用的AJAX控件, 网上有很多教程，但大多没有提起它的一些使用技巧：

 

1.简单应用：

 

常用属性：

      TargetControlID：用于触发弹出面板的控件。
      OkControlID：弹出面板中的确认按钮，用于确认新的样式。
       OnOkScript：当单击确认按钮后，关闭样式面板后，执行脚本。
      CancelControlID：样式面板中的取消按钮，用于取消应用样式。
      PopupDragHandleControlID：样式面板中用于触发面板的控件。
      DropShadow：样式面板是否有阴影。值为True，则有阴影；值为False，则没有阴影。
      BackgroundCssClass：样式面板中应用的css样式。

 

最简单的应用示例：

 

Code

 

2.半透明阴影遮罩

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

半透明背景css可以如下：

 

Code

 

3.JavaScript 控制

 

如果我们需要用JavaScript控制弹出层的 show/hide ，使用以下代码即可：

 

    $find('Panel1').hide()
    $find('Panel1').show()

 

前提是，PopupControlID和BehaviorID都要是Panel1

完整代码如下：

 

Code

 

 

 

 

posted @ 2008-08-27 16:02  LanceZhang  阅读(8947)  评论(0)  编辑  收藏  举报