显示bootbox覆盖模态对话框

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中，我有打开bootbox确认对话框的逻辑。但是我的问题是，这个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);
    }
});

有什么办法可以让这个 bootbox 出现在模态对话框之上吗？

- paul

Answer 1

这是一个已确认的问题：在bootstrap模式窗口中使用bootbox.confirm()。

你可以使用以下方法解决此问题，在你的CSS中添加如下内容：

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

- Praveen Kumar Purushothaman

---

那个不起作用，在票据中他们没有确认这是一个问题，没有其他办法修复它。 - undefined

@paul 如果我们能看到一个可工作的演示或示例，那就太好了。 - undefined

整个对话涉及到requireJS，很抱歉我没有找到一个简单的方法通过fiddle向你们展示。 - undefined

@Praveen谢谢你，这解决了我的问题。我正在使用lobipanel和bootbox，当最大化lobipanel时，bootbox会显示在lobipanel的后面。我按照你上面提到的方法将z-index设置为99999，问题解决了。 - undefined

@YaqoobAl-Shuaibi 很高兴听到这个消息，尽量使用较小的值...以防万一。☺ - undefined

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

- Wazime