ModalPopupExtender dosenot show up and display blank page - asp.net

Question

hi,
I had aproblem on model popup extender as I used it well , I did my code well .but when I was testing it it didnot show up only blank page appeared.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
width: 500px;
height: 300px;
}
.btnadd
{
background-image: url('Content/Images/add.png');
height: 27px;
width: 78px;
border: none;
background-repeat: no-repeat;
cursor: pointer;
}
.calhover
{
cursor: pointer;
vertical-align: baseline;
}
.z
{
clear: both;
height: 1px;
}
.tile
{
background-image: url('Content/Images/tile.png');
background-repeat: repeat-y;
width: 437px;
background-position: right;
color: White;
font-weight: bold;
}
.activetab
{
background-color: Green;
font-size: 50px;
}
.accordion
{
width: 770px;
}
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
<script type="text/javascript">
function ValidateCheckBox1(sender, args) {
if (document.getElementById("<%=CheckBox1.ClientID %>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
<script type="text/javascript">
function ValidateCheckBox2(sender, args) {
if (document.getElementById("<%=CheckBox2.ClientID %>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
<script type="text/javascript">
function ValidateCheckBox3(sender, args) {
if (document.getElementById("<%=CheckBox3.ClientID %>").checked == true) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
<ContentTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="body_con ">
<div class="bf_body_d">
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
</td>
<td class="body_content" valign="top">
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="3">
<tr>
<td style="border: #3399FF">
<table width="100%" border="0" cellspacing="3" cellpadding="2">
<tr>
<td width="100%" class="style1" align="left">
<h3 style="color: Gray; font-size: large;">
Questions</h3>
<h2>
Please be aware that your answer on both questions might be used by HR to screen
your application.</h2>
</td>
</tr>
<tr>
<td class="style1" align="left">
<asp:DataList ID="Dl_Question" runat="server" OnItemDataBound="Dl_Question_ItemDataBound"
OnItemCommand="Dl_Question_ItemCommand">
<ItemTemplate>
<asp:Label ID="lbl_QID" runat="server" Text='<%# Eval("ID") %>' Visible="false"></asp:Label><br />
<asp:Label ID="Lbl_Question" runat="server" Text='<%# Eval("Question") %>'></asp:Label><br />
<textarea id="Txt_Answer" cols="75" rows="3" runat="server"></textarea>
<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="Txt_Answer"
ErrorMessage="*" Display="Dynamic" SetFocusOnError="True" ForeColor="Red" ValidationGroup="question">*</asp:RequiredFieldValidator>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
<tr>
<td width="100%" class="style1" align="left" valign="top">
<h3 style="color: Gray; font-size: medium;">
Upload Your CV
</h3>
<asp:FileUpload ID="FU_CV" runat="server" />
<asp:CustomValidator ID="CustomValidator" runat="server" ControlToValidate="FU_CV"
ErrorMessage="File size should not be greater than 4 MB." OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="FU_CV"
ErrorMessage="*" Display="Dynamic" SetFocusOnError="True" ForeColor="Red" ValidationGroup="question">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td valign="top">
<div>
<asp:Panel ID="Panel2" runat="server">
<h2 style="color: Blue; font-size: medium;">
Please certify the information supplied before submitting your CV by checking the
checkbox below .</h2>
<h2 class="dark_gray">
<asp:CheckBox ID="CheckBox1" runat="server" />
<span>I certify that all answers given herein are true and complete.
<asp:CustomValidator ID="CustomValidator1" runat="server" ForeColor="Red" ErrorMessage="*"
ClientValidationFunction="ValidateCheckBox1" ValidationGroup="question"></asp:CustomValidator>
</span>
<br />
<asp:CheckBox ID="CheckBox2" runat="server" />
<span>I authorize investigation of all statements contained in this application for
employment as may be necessary in arriving at an employment decision.
<asp:CustomValidator ID="CustomValidator2" runat="server" ForeColor="Red" ErrorMessage="*"
ClientValidationFunction="ValidateCheckBox2" ValidationGroup="question"></asp:CustomValidator></span>
<br />
<asp:CheckBox ID="CheckBox3" runat="server" />
<span>I hereby certify that all the above data is true and correct. If proven otherwise,
I will be dismissed without any notice or commitment from the employer.
<asp:CustomValidator ID="CustomValidator3" runat="server" ForeColor="Red" ErrorMessage="*"
ClientValidationFunction="ValidateCheckBox3" ValidationGroup="question"></asp:CustomValidator>
</span>
</h2>
</asp:Panel>
<div align="center" style="padding-top: 10px;">
<asp:ImageButton ID="preup" runat="server" ImageUrl="~/Content/Images/down.png" OnClick="preup_Click" />
<asp:ImageButton ID="BT_submit" runat="server" ImageUrl="~/Content/Images/finish.png"
OnClick="BT_submit_Click" ValidationGroup="question" /></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<!-- Kareem end here plz -->
</tr>
</table>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<cc1:ModalPopupExtender ID="modalpopup" runat="server" OkControlID="btnOkay" TargetControlID="hfield"
PopupControlID="display" PopupDragHandleControlID="PopupHeader" Drag="true" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hfield" runat="server" />
<asp:Panel ID="display" Style="display: none" runat="server">
<div>
<img src="Content/Images/warning.png" />
</div>
<div align="center">
<input id="btnOkay" type="button" value="OK" />
</div>
</asp:Panel>
protected void BT_submit_Click(object sender, ImageClickEventArgs e)
{
string File = "~/CvFiles/" + FU_CV.FileName;
if (FU_CV.FileBytes.Length > 4194304)
{
modalpopup.Show();
}
}

Answer 1

I had solved this problem as I added TargetControlID to hidden field's ID but when I replaced it with the ID of submit button "BT_submit" it worked well.