Complete Example:
-----------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RoleMgmt._Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function ok(sender, e)
{
$find('ctl00_ContentPlaceHolder1_mpeTask').hide();
__doPostBack('ctl00_ContentPlaceHolder1_btnSave', e);
}
</script>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:LinkButton ID="lnkAddOtherTask" runat="server">add Task</asp:LinkButton></div>
<br />
<cc1:ModalPopupExtender ID="mpeTask" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="btnCancel" DropShadow="false" PopupControlID="Panel1"
TargetControlID="lnkAddOtherTask" BehaviorID="MsgPopup">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" Width="100%" Style="display: none">
Role: <asp:DropDownList ID="ddlusers" runat="server"></asp:DropDownList>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Add Category</asp:LinkButton>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" Width="50%">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<EditRowStyle BackColor="#7C6F57" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Form Name">
<ItemStyle Width="50%" />
<ItemTemplate>
<asp:Label ID="lblFormName" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Add">
<ItemTemplate>
<asp:CheckBox ID="chkAdd" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:CheckBox ID="chkEdit" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:CheckBox ID="chkDel" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="View">
<ItemTemplate>
<asp:CheckBox ID="chkView" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" /><br />
<asp:Button ID="btnCancel" runat="server" OnClick="btnSave_Click" Text="Cancel" />
<br />
</asp:Panel>
<br /><cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="btnOtherTaskCancel" DropShadow="false" PopupControlID="Panel2"
TargetControlID="LinkButton1">
</cc1:ModalPopupExtender>
<br />
<br />
<asp:Panel ID="Panel2" runat="server" Width="100%" Style="display: none" >
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%" class="tblsection">
<tr>
<td align="right">
<asp:Label ID="lblOtherTaskNameTitle" runat="server" Text="Task Name:" Width="88px"></asp:Label></td>
<td>
<asp:TextBox ID="txtOtherTaskName" runat="server" CssClass="txtbox" Width="185px"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvTaskName" runat="server" ControlToValidate="txtOtherTaskName"
ErrorMessage="Please enter task name." ValidationGroup="e"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td align="right" style="height: 22px">
<asp:Label ID="lblCat" runat="server" Text="Category:" Width="88px"></asp:Label></td>
<td style="height: 22px">
<asp:DropDownList ID="ddlCat" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Label ID="lblOtherTaskDesc" runat="server" Text="Description:"></asp:Label></td>
<td>
<asp:TextBox ID="txtOtherTaskDesc" runat="server" CssClass="txtbox" Height="136px"
TextMode="MultiLine" Width="617px"></asp:TextBox></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Label ID="lblEstmtdHr" runat="server" Text="Estmtd. Hours:"></asp:Label></td>
<td>
<asp:TextBox ID="txtEstmtdHr" runat="server" CssClass="txtbox" Width="47px" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEstmtdHr" runat="server" ControlToValidate="txtEstmtdHr"
ErrorMessage="Please enter hours." ValidationGroup="e"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td align="left">
<asp:Button ID="btnOtherTaskSave" runat="server" CommandName="up" CssClass="buttonBlue"
Text="Save" ValidationGroup="e" OnClick="btnOtherTaskSave_Click" /></td>
<td align="left">
<asp:Button ID="btnOtherTaskCancel" runat="server" CommandName="can" CssClass="buttonBlue"
Text="Cancel" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
</asp:Panel>
<br />
<br />
<br />
<br />
</form>
</body>
</html>
Example for BehaviorId of ModalPopupExtender
-----------------------------------------------------------------
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server"
BehaviorID="MsgPopup" targetcontrolid="LinkButton1"
BackgroundCssClass="modalBackground"
PopupControlID="Panel2"></cc1:modalpopupextender>
instead id, you can use BehaviorId to show and hide ModalPopupExtender.
$find('MsgPopup').show() // to show the ModalPopupExtender.
$find('MsgPopup').hide() // to hide the ModalPopupExtender.