I have modal dialog like this one

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

Then in the personsTable.js associate to the include page I have the logic to open a bootbox confirm. But my problem is, that this bootbox it´s showing under the modal dialog, so it´s not intractable.

Here my bootbox creation

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

Any idea what can I do to show this bootbox over the modal dialog?

I have modal dialog like this one

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

Then in the personsTable.js associate to the include page I have the logic to open a bootbox confirm. But my problem is, that this bootbox it´s showing under the modal dialog, so it´s not intractable.

Here my bootbox creation

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

Any idea what can I do to show this bootbox over the modal dialog?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Jul 2, 2015 at 15:14 Siguza 24k66 gold badges5555 silver badges9898 bronze badges asked Jul 2, 2015 at 14:44 paulpaul 13.5k2424 gold badges9999 silver badges168168 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is a confirmed issue: using bootbox.confirm() within a bootstrap modal.

You have a workaround. Add this in your CSS:

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

my humble (working in production) solution

You should edit bootbox, look for the callback of:

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

and change it to:

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./makeusabrew/bootbox/issues/356#issuement-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();
            }
        });