Close image on modelpopup doesn't work after postback

Question

I have ajax modelpopup extender in my webform with CancelControlID set to an image imgClose. When I click on imgClose after popup has been displayed it closes the popup. But if I click on any controls or select some controls that require postback, clicking the image wouldn't do nothing at all. Previously I had a button as CancelControlID for same modelpopup. It also had the same problem. I got around it with OnClick="btnClose_Click"codebehind method and hiding modelpopup.

For the imgClose I tried using client-side method but it doesn't work. Any ideas?

Here's 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>

score 0 · Accepted Answer · edited Jun 30 '15 at 21:07

0

Try moving the imgClose button into the divPreview outside of UpdatePanel. Also you shouldn't need the onclick in the imgClose because the ModalPopupExtender handles it by setting the CancelControlID property.

edited Jun 30 '15 at 21:07

TFrost

769
2
12
31

answered Jun 28 '15 at 23:40

Carlos

241
5
11

I do actually have imgClose in divPreview. I have updated the post... so you can refer to it... Reason I had to put onclick was that imgClose doesnt work after there is a postback. divMenu and divBody contains several controls that trigger various postback functions. – TFrost Jun 29 '15 at 09:21
Can you edit your post and add a button that makes the imgClose stop working please? I tried myself and it is working here but when I open my modal, i cannot do any postback because there is a overlay div blocking the whole page except the modal. – Carlos Jun 29 '15 at 17:51
1

Sorry, I tried something different: moved your imgClose to outside of UpdatePanel but inside divPreview. – Carlos Jun 29 '15 at 17:59
I have updated my code in the post... I have added some controls I've been using that trigger a postback... – TFrost Jun 30 '15 at 07:46
Hi buddy. Try this example... Default.aspx.cs: [http://pastebin.com/kdNx7icb](http://pastebin.com/kdNx7icb). After the postback, the close button loses its click handler. If you want to use your custom click handler and bind it after every postback you can do something like in this post [http://stackoverflow.com/a/4223963/3000462](http://stackoverflow.com/a/4223963/3000462). – Carlos Jun 30 '15 at 19:53
I just visited pastebin for the example. Yep it does work. Just had to position my imgClose just outside of UpdatePanel but inside of divPreview. I misunderstood your earlier comment.. and thought it didn't work. Thanks – TFrost Jun 30 '15 at 20:52
Glad I could help you :) – Carlos Jun 30 '15 at 21:09

Close image on modelpopup doesn't work after postback

1 Answers1