从代码隐藏关闭时，Foundation 6模态叠加保持不变

Question

I have a page that shows a list of items, on clicking a button by an item, a modal containing a form pops-up for the user to edit the item. When they click the relevant button, the data is updated by the code behind and the modal should close.

What happens: The data is being saved correctly, the form within the modal disappears but the overlay (background) remains in place so the page can't be used. Why isn't the overlay closing?

JavaScript:

    function openthemodal() {
        var popup = new Foundation.Reveal($('#exampleModal1'));
        popup.open();
    }

    function closethemodal() {
        eventFire(document.getElementById('btnclosebutton'), 'click');
    }

    function eventFire(el, etype) {
        if (el.fireEvent) {
            el.fireEvent('on' + etype);
        } else {
            var evObj = document.createEvent('Events');
            evObj.initEvent(etype, true, false);
            el.dispatchEvent(evObj);
        }
    }

HTML (excerpt):

<div class="reveal" id="exampleModal1" data-reveal>
    <h3><asp:Label runat="server" ID="lblexpensetitle"></asp:Label></h3>
    <!-- Form code here -->
    <button id="btnclosebutton" class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
    </button>

    <a href="javascript:closethemodal();">Close Modal</a>
</div>

Clicking on the "Close Modal" link and the "close" button in the modal work fine.

c# code to open and close the modal

ScriptManager.RegisterStartupScript(this, typeof(Page), "openmodal", "javascript:openthemodal();", true);
ScriptManager.RegisterStartupScript(this, typeof(Page), "closemodal", "javascript:closethemodal();", true);

UPDATE 1

Realised I hadn't pointed out the modal is within an UpdatePanel, don't know if that makes a difference.

Answer 1

Why do you use your own method to make a click if you're using jQuery? You can do it in one line:

$('#btnclosebutton').click()

As for overlay, that's kinda strange. You can add this line to closethemodal() function to hide it:

$('#btnclosebutton').parent('.reveal').parent('.reveal-overlay').hide();