0

I am using bootbox and I have a button on my modal which is when clicked, it opens another modal. The problem is that when the new modal is opened, the modal behind it does not become dim. Instead, the background behind the two modals just gets dimmer. What should I do to fix it?

Here is my sample code:

        $('#new-btn').click(function () {
        new_room_form = bootbox.dialog({
            title: "New room",
            message: 
                '<div class="row">' +
                    '<div class="col-md-12">' +
                    '<form>' +
                        '<fieldset style="padding: 20px">' +
                            '<legend>Example:</legend>' +
                            '<div class="form-group">' +
                                '<button class="btn btn-primary" id="add">Add</button>' +
                            '</div>' +

                        '</fieldset>' +
                    '</form>' +
                '</div>' +
            '</div>',
            buttons: {
                cancel: {
                    label: "Cancel",
                    className: "btn btn-default"
                },
                add: {
                    label: "Add",
                    className: "btn btn-primary",
                }

            }
    }); // end bootbox dialog      

     $('#add').on('click', function(response) {
            bootbox.alert("Hello world!", function() {
            });
             return false;
        }); 
    });
Compiler
  • 101
  • 2
  • 8
  • possible duplicate of [Bootbox, two modal windows - one above another](http://stackoverflow.com/questions/20521605/bootbox-two-modal-windows-one-above-another) – Tieson T. Jul 14 '15 at 07:08

3 Answers3

2

Bootbox is mostly just a wrapper/helper library intended to make Bootstrap modals easier to use. As such, it has all of Bootstrap's limitations, which includes:

Multiple open modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

http://getbootstrap.com/javascript/#modals

In a nutshell, you would have to handle this yourself. What you're seeing is likely a result of the absolute positioning and z-index values being the same for the overlays.

At the moment, I'm not aware of anything in Bootbox or Bootstrap that lets you directly manipulate the modal's backdrop. The closest you get is an option to disable the backdrop, which you do by passing backdrop: false as one of the options.

Community
  • 1
  • 1
Tieson T.
  • 20,774
  • 6
  • 77
  • 92
0

Good answer from here: https://newbedev.com/multiple-modals-overlay and here: Multiple modals overlay

Add this script to your HTML:

 <script type="text/javascript">      
    $(document).on('show.bs.modal', '.modal', function () {
      var zIndex = 1040 + (10 * $('.modal:visible').length);
      $(this).css('z-index', zIndex);
      setTimeout(function () {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
      }, 0);
    });
  </script>

Explanation: On the modal shown event the script gets a count of the shown modals and then calculates and applys a zindex for this modals backdrop as (1040 + (10 * n)) where n is the number of open modals. The setTimout is used due to timings in the creation of the elements.

apc
  • 5,306
  • 1
  • 17
  • 26
0

A way I took care of this is overriding the z-index of the bootbox modal and modal backdrop to be on top of the standard modal z-index of 1050.

I added two css classes:

.bootbox.modal {
    z-index: 1070 !important;
}
.modal-backdrop.bootbox-above-modal {
    z-index: 1060 !important;
}

I then disabled the default bootbox modal backdrop and added my own modal backdrop using jquery:

bootbox.dialog({
    message: 'My alert!',
    backdrop: false,
    onShow: e => $('body').append('<div class="modal-backdrop fade show bootbox-above-modal"></div>'),
    onHide: e => $('.modal-backdrop.bootbox-above-modal').remove()
})
Peter King
  • 11
  • 3