Question

我尝试了大约提供的十几个提示，使模式消失，但没有一个解决了我的问题。首先，请允许我分享有关问题的一些细节。

模式由用户触发的事件（即按钮点击）弹出，但当JavaScript计时事件结束时，它应该会消失。见下面的伪代码：

User event is triggered that sends Ajax requests to server
Show modal
Create JS timing event
Let the timing event wait until all Ajax requests are finished
Hide modal

使用IE的DOM Explorer，我观察到模态标记的状态如下（这是在完成所有Ajax调用之后）：

<div class='modal hide in' id='progress-indicator-dialog' aria-hidden='false' style='display:block;' data-keyboards='false' data-backdrop='static'>
    <div class='modal-header'>
        <h1 id='progress-indicator-dialog-title'>Processing...</h1>
    </div>
    <div class='modal-body'>
        <div class='progress progress-striped active'>...</div>
    </div>
</div>

我还注意到在DOM资源管理器中，属于display: none;元素的.hide样式的progress-indicator-dialog定义以某种方式被覆盖。我想这可能是原因。

无论如何，我尝试了标准.modal('hide')方法以及.css('display','none')，.remove()和其他一些“黑客”，但似乎没有任何效果。

我非常乐于接受想法/提示。

修改

注意 - 这是基于.NET MVC框架的自定义Orchard（开源CMS）的一部分。我不能简单地复制和粘贴整个代码的原因是，大部分DOM都是动态生成的，而且非常庞大。我试图只挑选代码的相关部分。

jQuery的：

$("#export-html").click(function () {
    // some initialization
    // ....

    $("#progress-indicator-dialog").modal();
    $("#progress-indicator-dialog-title").text("Processing...");

    $.each(checkedIds, function(i, val) {
        var jqxhr = 
            $.ajax({
                // ...
            });

        jqxhr.then(function () {
            var interval = setInterval( function() { doThis() }, 500};

            function doThis() {
                var el = $("#temp-html").find("div.document-body");
                if (el.length > 0) {
                    stopInterval();
                } else {
                    // ...
                }
            }

            function stopInterval() {
                clearInterval(interval);

                // some action

                iteration++;
            }
        });
    });

    var allDone = setInterval( function() { doThat() }, 500);

    function doThat() {
        if (iteration >= totalNum) {
            clearInterval(allDone);
            $("#progress-indicator-dialog").modal('hide');

            // ...

        }
    }
});

HTML：（仅限模态部分）

<div class='modal hide' id='progress-indicator-dialog' data-backdrop='static' data-keyboard='false'>
    <div class='modal-header'>
        <h1 id='progress-indicator-dialog-title>...</h1>
    </div>
    <div class='modal-body'>
        <div class='progress progress-stripped active'>
            <div class='bar' style='width:100%;'></div>
        </div>
    </div>
</div>

Bootstrap模态“隐藏”不起作用

0 个答案: