PopupControlExtender控件

功能：
    Popupcontrol可以弹出任意类型的控件，不管是在服务器控件还是html控件。就是在某控件获取焦点时弹出另外一个控件，进行一些操作后，隐藏弹出的控件。

属性：
    TargetControlID:需要弹出的控件的id
    PopupControlID:作为弹出控件的id
    Position:弹出控件的位置
    OffsetX/OffsetY:弹出控件的位置与默认位置的相对坐标

实例代码：

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > Untitled Page </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
     </ asp:ScriptManager >
     Enter date for new reminder:
     < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
     < asp:Panel  ID ="Panel1"  runat ="server" >
     < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server"  UpdateMode ="Conditional" >
       < ContentTemplate >   
      < asp:Calendar  ID ="Calendar1"  runat ="server"  BackColor ="White"  BorderColor ="#999999"  
              CellPadding ="4"  DayNameFormat ="Shortest"  Font-Names ="Verdana"  Font-Size ="8pt"  
              ForeColor ="Black"  Height ="180px"  Width ="200px"   OnSelectionChanged ="Calendar1_SelectionChanged" >
          < selecteddaystyle  backcolor ="#666666"  font-bold ="True"  forecolor ="White"   />
          < selectorstyle  backcolor ="#CCCCCC"   />
          < weekenddaystyle  backcolor ="#FFFFCC"   />
          < todaydaystyle  backcolor ="#CCCCCC"  forecolor ="Black"   />
          < othermonthdaystyle  forecolor ="#808080"   />
          < nextprevstyle  verticalalign ="Bottom"   />
          < dayheaderstyle  backcolor ="#CCCCCC"  font-bold ="True"  font-size ="7pt"   />
          < titlestyle  backcolor ="#999999"  bordercolor ="Black"  font-bold ="True"   />
           </ asp:Calendar >
     </ ContentTemplate >
     </ asp:UpdatePanel >  
     </ asp:Panel >
     < br  />
     < br  />
    Reminder message:
      < asp:TextBox  ID ="MessageTextBox"  runat ="server"  Width ="200"  autocomplete ="off"   />< br  />< br  />
         < asp:Panel  ID ="Panel2"  runat ="server"  CssClass ="popupControl" >
             < div  style ="border: 1px outset white; width: 100px" >
                 < asp:UpdatePanel  runat ="server"  ID ="up2" >
                     < ContentTemplate >
                         < asp:RadioButtonList  ID ="RadioButtonList1"  runat ="server"  AutoPostBack ="true"
                            OnSelectedIndexChanged ="RadioButtonList1_SelectedIndexChanged" >
                                 < asp:ListItem  Text ="Walk dog"   />
                                 < asp:ListItem  Text ="Feed dog"   />
                                 < asp:ListItem  Text ="Feed cat"   />
                                 < asp:ListItem  Text ="Feed fish"   />
                                 < asp:ListItem  Text ="Cancel"  Value =""   />
                         </ asp:RadioButtonList >
                     </ ContentTemplate >
                 </ asp:UpdatePanel >
             </ div >
         </ asp:Panel >
         < ajaxToolkit:PopupControlExtender  ID ="PopupControlExtender2"  runat ="server"
            TargetControlID ="MessageTextBox"
            PopupControlID ="Panel2"
            CommitProperty ="value"
            Position ="Bottom"
            CommitScript ="e.value += ' - do not forget!';"   />

    
    
    

      < ajaxToolkit:PopupControlExtender  ID ="PopupControlExtender1"  runat ="server"  TargetControlID ="TextBox1"  PopupControlID ="Panel1"  Position ="Right" >
     </ ajaxToolkit:PopupControlExtender >
    
     </ form >
</ body >
</ html >

 后台 添加点击 Calendar和RadioButtonList的OnSelectedIndexChanged事件。

  protected   void  Calendar1_SelectionChanged( object  sender, EventArgs e)
     {
        
        this.TextBox1.Text = this.Calendar1.SelectedDate.ToShortDateString();
        PopupControlExtender1.Commit(this.TextBox1.Text);
    }

       protected   void  RadioButtonList1_SelectedIndexChanged( object  sender, EventArgs e)
     {
        if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
        {
            // 这里需要注意，执行选择操作
            PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
        }
        else
       {
            // 取消操作
            PopupControlExtender2.Cancel();
        }
    }

运行结果：