Ajax中ModalPopupExtender的使用

Ajax中的控件还真不少，在网上看到的那些效果，也不就用了这个控件吧。

今天来研究了下，只能说能简单使用了。

先添加好第三方控件。

新建一个网站，拖好界面。

 

一个div:名showdiv

一个linkButton,

一个Panel,有三个Radio

最下面就是一个ModalPopupExtender

 

下面设置一下ModalPopupExtender的TargertControlId属性，选择点击后会背景灰显的控件，这里就选的LinkBotton.

 

由于这里是要实现选中一，二，三种其中一种后，show中的样式就改变，所以，

先把样式写好。

  <style type="text/css">
        .ModalBackground
        {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:.7;
        }
       
        .StyleA
        {
            background-color:#FFF;
        }
       
        .StyleB
        {
            background-color:blue;
            color:White;
            font-family:Arial;
            font-size:10pt;
        }
       
        .StyleC
        {
            background-color:#DDFFDD;
            font-family:sans-serif;
            font-size:10pt;
            font-style:italic;
        }
    </style>
   
    <script type="text/javascript">
        var styleToSelect;
        function onOK()
        {
            $get('DivShow').className=styleToSelect;
        }
    </script>

这时，在LinkBotton中会有一个关于ModalPopupExtender的属性。

 

 

设置好后，写上对应的按钮的事件.

在radio中写好onclick="styleToSelect='StyleA'事件。

然后， 再添加一些ModalPopupExtender 的属性。

  <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" BackgroundCssClass="ModalBackground" CancelControlID="CanBtn" Drag="True" DropShadow="True" OkControlID="OkBtn" OnOkScript="onOK()" PopupControlID="Panel1" PopupDragHandleControlID="Panel2">
        </cc1:ModalPopupExtender>

这样就可以了，

看看效果吧。