Ajax ModalPopupExtender control sample in ASP.NET

ModalPopupExtender is a very useful control in Ajax Control Toolkit. It's used to display content as a modal dialog box. Here when the user clicks the "Show" button a panel will be displayed as a modal dialog. That panel has a "Hide" button. When the user clicks the hide button the modal dialog will be closed. use your creativity to display the modal dialog box more interactively using CSS.
Namespace:

 using AjaxControlToolkit;  

Design Code:

 <asp:Button ID="btn_Show" runat="server" Text="Show" OnClick="btn_Show_Click" />  
 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
 <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="HiddenField1" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>  
 <asp:HiddenField ID="HiddenField1" runat="server" />  
 <asp:Panel ID="Panel1" runat="server">  
   <div style="width: 200px; height: 150px; background-color: yellow;">  
       <asp:Button ID="btn_Hide" runat="server" Text="Hide" OnClick="btn_Hide_Click" />  
   </div>  
 </asp:Panel>  

C# Code:

 protected void btn_Show_Click(object sender, EventArgs e)  
 {  
    this.ModalPopupExtender1.Show();  
 }  
 protected void btn_Hide_Click(object sender, EventArgs e)  
 {  
    this.ModalPopupExtender1.Hide();  
 }  

CSS code:

 .modalBackground  
 {  
   background-color: Gray;  
   filter: alpha(opacity=70);  
   opacity: 0.7;  
 }  

Note: you have to add Ajax Controll Toolkit in project.