Opening multiple dialogs

[Libig]

Hi, I found this project which might be good for me.

Is it possible to have multiple dialogs all being accessible (closable) on their own with only one overlay gray background?

Thanks!

[nakupanda]

I think it can't be done like that easily. By saying 'easily' here I mean it's also possible but it's just difficult to do it.

[mtorak]

Hi there, i also have a similar requirement which is multiple non-modal draggable dialogs. All modals should be accessible and shouldn't block the page. Do you have a solution / recommendation for this case? Thank you

[elsuenog]

Hi, I had to do something similar to this. Originally I wanted two active modals being active(accessible at the same time), but seeing as I had a short period of time to do this; I just added buttons to switch between modals. It's not mind blowing but it works for what I need it to do, maybe later when I have free time I will dive deeper to make it simpler.

`        var instance1 = new BootstrapDialog({
            type: BootstrapDialog.TYPE_INFO,
            title: "Are you sure?",
            cssClass: 'test',
            message: $('#tableResults'),
            draggable: true,
            closeByBackdrop: false,
            buttons: [{
                icon: 'glyphicon glyphicon-menu-right',
                cssClass: "btn-xs btn-primary forward",
                action: function (dialogRef) {
                    $('.forward').css({ "display": "none" });
                    $('.back').css({ "display": "initial" });
                    dialogRef.setClosable(true);
                    $('.cancelButton').removeAttr('disabled');
                    $('.submit').removeAttr('disabled');
                    $('.test1').css("z-index", 1051);
                    $('.test').css("z-index", 1050);
                }
            }, {
                label: "Cancel",
                cssClass: "btn-default cancelButton",
                action: function (dialogRef) {
                    dialogRef.close();
                    instance2.close();
                }
            }, {
                label: "Submit",
                cssClass: "btn-primary submit",
                action: function (dialogRef) {
                    instance2.open();
                }
            }]
        });
        instance1.open();
            var instance2 = new BootstrapDialog({
                type: BootstrapDialog.TYPE_INFO,
                title: "This is instance 2?",
                message: "Hello world!",
                draggable: true,
                autodestroy: false,
                cssClass: 'test1',
                onshown: function (dialog) {
                    if (dialog.$modal.prev(".modal-backdrop").length===1)
                        dialog.$modal.prev(".modal-backdrop").css("z-index", 1040);
                    else
                        dialog.$modal.next(".modal-backdrop").css("z-index", 1040);
                    dialog.$modal.css("z-index", 1051);

                },
                closeByBackdrop: false,
                buttons: [{
                    icon: 'glyphicon glyphicon-menu-left',
                    cssClass: "btn-xs btn-primary back",
                    action: function (dialogRef) {
                        $('.forward').css({ "display": "initial" });
                        $('.back').css({ "display": "none" });
                        $('.cancelButton').attr('disabled', 'disabled');
                        $('.submit').attr('disabled', 'disabled');
                        instance1.setClosable(false);
                        var top = $(".test1 .modal-dialog").css("top");
                        $('.test1').css("z-index", 1050);
                        $('.test').css("z-index", 1051);
                        $(".test .modal-dialog").css({"top":top});
                    }
                }, {
                    label: "Cancel",
                    action: function (dialogRef) {
                        dialogRef.close();
                    }
                }, {
                    label: "Submit",
                    cssClass: "btn-primary",
                    action: function (dialogRef) {
                        $('.alert').css({ "display": "inherit" });
                        dialogRef.close();
                    }
                }]
            });`