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

Question

我有一个显示项目列表的页面，单击项目旁边的按钮时，会弹出一个包含表单的模式，供用户编辑该项目。当他们单击相关按钮时，数据将由后面的代码更新，并且模式应该关闭。

发生了什么:数据正确保存，模式中的表单消失，但覆盖层(背景)保留在原处，因此页面无法使用。为什么叠加层没有关闭？

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(摘录):

<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>

单击“关闭模态”链接和模态中的“关闭”按钮可以正常工作。

用于打开和关闭模式的 C# 代码

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

更新1

意识到我没有指出模式位于 UpdatePanel 内，不知道这是否会产生影响。

Answer 1

如果您使用 jQuery，为什么还要使用自己的方法来进行点击？您可以用一行完成:

$('#btnclosebutton').click()

至于覆盖，这有点奇怪。您可以将此行添加到 closethemodal() 函数中以隐藏它:

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