Question

我有像这样的模态对话

<div id="tenantDialog" class="modal fade" tabindex="-1" data-backdrop="static">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">
                <i class="fa fa-users"></i>
                <spring:message code="label.tenant.person.title"/>
            </h4>
        </div>
        <div class="modal-body">
            <%--We load here the persons table here to be reloaded in any moment--%>
            <div id="personTableDiv">
                <c:set var="preferredCollaborators" value="${preferredCollaborators}" scope="request"/>
                <jsp:include page="personsTable.jsp"/>
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>

然后在personsTable.js关联到include页面我有逻辑打开一个bootbox确认。但我的问题是，这个启动箱在模态对话框下显示，所以它不是难以处理的。

这里是我的bootbox创建

bootbox.confirm(customText, function (confirmed) {
    if (confirmed) {
        var regularityDocumentsIds = [];
        var i;
        for (i = 0; i < selectedPersons.length; i += 1) {
            regularityDocumentsIds.push($(selectedPersons[i]).attr("data-preferredcollaboratorid"));
            }
        removePersons(regularityDocumentsIds);
    }
});

我知道如何在模态对话框中显示此引导框？

Answer 1

这是一个确认的问题：using bootbox.confirm() within a bootstrap modal。

你有一个解决方法。在CSS中添加：

.bootbox.modal {z-index: 9999 !important;}

Answer 2

我的谦逊（在生产中工作）解决方案

你应该编辑bootbox，寻找回调：

dialog.one("hidden.bs.modal", function (e) {
            // ensure we don't accidentally intercept hidden events triggered
            // by children of the current dialog. We shouldn't anymore now BS
            // namespaces its events; but still worth doing
            if (e.target === this) {
                dialog.remove();
            }
});

并将其更改为：

dialog.one("hidden.bs.modal", function (e) {
            // ensure we don't accidentally intercept hidden events triggered
            // by children of the current dialog. We shouldn't anymore now BS
            // namespaces its events; but still worth doing
            if (e.target === this) {
                dialog.remove();
            }

            // inspired by : https://github.com/makeusabrew/bootbox/issues/356#issuecomment-159208242
            // if there is another modal, stop the event from propgating to bootstrap.js
            // bootstrap.js uses the same event to remove the "modal-open" class from the body, and it creates an unscrolable modals
            if ($('.modal.in').css('display') == 'block') {
                // do not notify bootstrap about this change!!
                e.stopPropagation();
            }
        });

在模态对话框上显示bootbox

2 个答案: