ModalPopup控件

功能：
    使用时，会使整个屏幕都会是灰色的，只有一个“模式”对话框可以操作. ModalPopup是一个扩展控件，它建立在已经存在panel等容器控件的基础上，而panel上可以放置任何控件，panel的样式也是自定义的. 当控件使用时, 点击panel之外的操作都是无效的.

属性：    

TargetControlID	点击后出现对话框的控件，一般为按钮控件
PopupControlID	对话框中的Panel的id
BackgroundCssClass	背景的css
DropShadow	对话框是否有阴影效果
OkControlID	Ok按钮的id
OnOkScript	Ok按钮触发脚本
CancelControlID	Cancel按钮的id
OkCancelScript	Cancel按钮触发脚本
PopupDragHandleControlID	Panel的中的标题栏，可以拖动，一般也是Panel
X	出现时，顶部的位置。
Y	出现时，左边的位置。

代码实例
    主要代码如下：

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
  <asp:Panel ID="Panel1" runat="server">
  
ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. 
</asp:Panel>
      
  <asp:LinkButton ID="btnChangeStyle" runat="server" ToolTip="Click here to change the paragraph style"  >Click here to change the paragraph style</asp:LinkButton>
    
    <asp:Panel ID="panModalPopup" runat="server"
               CssClass="cssModalPopup"
               Style="display: none">
      <table cellspacing="10" width="100%">
        <tr align="center">
          <td colspan="2">
            请选择您喜欢的样式：
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input id="Radio1" type="radio" name="Radio" onclick="styleSelected = 'cssStyle1';" />
            <label class="cssStyle1" for="Radio1" style="padding: 3px;">
              选用这个样式。
            </label>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input id="Radio2" type="radio" name="Radio" onclick="styleSelected = 'cssStyle2';" />
            <label class="cssStyle2" for="Radio2" style="padding: 3px">
              选用这个样式。
            </label>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input id="Radio3" name="Radio" onclick="styleSelected = 'cssStyle3';" type="radio" />
            <label class="cssStyle3" for="Radio3" style="padding: 3px;">
              选用这个样式。
            </label>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input id="Radio4" name="Radio" onclick="styleSelected = 'cssStyle4';" type="radio" />
            <label class="cssStyle4" for="Radio4" style="padding: 3px;">
              选用这个样式。
            </label>
          </td>
        </tr>
        <tr Align="center">
          <td>
            <asp:Button ID="btnOK" runat="server" Text="确定" />
          </td>
          <td>
            <asp:Button ID="btnCancel" runat="server" Text="取消" />
          </td>
        </tr>
      </table>
    </asp:Panel>
    
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                                    TargetControlID="btnChangeStyle"
                                    PopupControlID="panModalPopup"
                                    BackgroundCssClass="cssModalBackground"
                                    DropShadow="true"
                                    OkControlID="btnOK"
                                    OnOkScript="changeStyle()"
                                    CancelControlID="btnCancel">
    </ajaxToolkit:ModalPopupExtender>
  </form>

运行结果：