I am encountering an issue with my ajax modelpopup extender in my webform. The CancelControlID is set to an image called imgClose.
When I click on imgClose after the popup has been displayed, it successfully closes the popup. However, if I click on any controls or select some controls that require a postback, clicking the image does nothing at all.
Previously, I had a button set as the CancelControlID for the same modelpopup. It encountered the same issue, which I resolved by using the OnClick="btnClose_Click" codebehind method to hide the modelpopup.
For the imgClose, I attempted to use a client-side method, but it was unsuccessful. Any suggestions?
Below is my modelpopup extender, image control, and javascript:
<ajx:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnTest"
BackgroundCssClass="modalBackground" PopupControlID="divPreview" DropShadow="true"
CancelControlID="imgClose">
<div runat="server" id="divPreview">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="testDesign" runat="server" CssClass="boxdesignCustomerPopUp" Width="600px" Height="200px">
<div>
<table>
<tr>
<td>
<center>
<strong>
<asp:Literal ID="PopupTitleBar" runat="server"></asp:Literal>
</strong>
</center>
</td>
<td style="vertical-align: top; float: right; position: absolute; top: 0px; right: 0px;">
<img id="imgClose" alt="Close" src="image/close-button-red.png" runat="server" onclick="closeModelPopup()" />
</td>
</tr>
</table>
</div>
<div id="divMenu" style="float: left; width: 100px; height: auto">
</div>
<div id="divBody" style="border: 2px">
<div id="divLedger" runat="server">
<hr />
<table>
<tr>
<td class="designtextfont">Has Ledger</td>
<td class="designtextbox">
<asp:RadioButton ID="rdoLedgerYes" runat="server" AutoPostBack="True" GroupName="hasLedgerRdo"
Text="Yes" OnCheckedChanged="rdoLedgerYes_CheckedChanged" />
<asp:RadioButton ID="rdoLedgerNo" runat="server" AutoPostBack="True" GroupName="hasLedgerRdo"
Text="No" OnCheckedChanged="rdoLedgerNo_CheckedChanged" />
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
function closeModelPopUp() {
$find('ModalPopupExtender1').hide();
}
</script>