Opening a bootbox modal on top of another modal does not make the modal at the back dim

Question

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

Answer 1

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.