This way:
HTML:
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnlPanelDemo" runat="server" CssClass="modalPopup" ViewStateMode="Disabled">
<asp:TextBox ID="txtComment" runat="server" /><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtComment"
runat="server" ValidationGroup="Save" Display="Dynamic"></asp:RequiredFieldValidator><br />
<cc1:ValidatorCalloutExtender ID="RequiredFieldValidator1_ValidatorCalloutExtender"
BehaviorID="RequiredFieldValidator1_ValidatorCalloutExtender" runat="server"
Enabled="true" TargetControlID="RequiredFieldValidator1" PopupPosition="Right">
</cc1:ValidatorCalloutExtender>
<asp:Button ID="btnSave" Text="Save" runat="server" ValidationGroup="Save" />
<asp:Button ID="btnCancel" runat="server" ValidationGroup="Save" Text="Cancel" OnClientClick="return Cancel()" />
</asp:Panel>
<asp:Button ID="Button1" Text="Popup" runat="server" />
<cc1:ModalPopupExtender ID="mpeDemo" BehaviorID="mpeDemo" runat="server" PopupControlID="pnlPanelDemo"
EnableViewState="false" BackgroundCssClass="modalBackground" TargetControlID="Button1">
</cc1:ModalPopupExtender>
<script type="text/javascript">
function Cancel() {
$find("mpeDemo").hide();
$find("RequiredFieldValidator1_ValidatorCalloutExtender").hide();
return false;
}
</script>
</div>
</form>
STYLE:
<style type="text/css">
.modalBackground
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modalPopup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
}
</style>
