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();

从代码隐藏

1 个答案: