Multiple dialogs

[palavrov]

Starting a new issue because #698 is locked.

Seems that passing skipHide:true to mdDialog options allow multiple dialogs. There are just two small issues that probably can be easily fixed:

• second backdrop doesn't cover the first dialog instead it goes behind it. Probably playing with Z order can help.
• Sometimes closing the dialogs goes in reverse order i.e. first closes the dialog underneath.

[scriptsure]

+1 skipHIde works very well... BUT if the controller has for instance:

this.$mdDialog.cancel();

This closes the parent first. Then if cancel() is engaged again then it closes the child. So as palavrov said they are closing in reverse order... or reacting in reverse order...

SMALL UPDATE:

if you use this.$mdDialog.hide() it works!!!!

[palavrov]

@scriptsure, actually it is more weird than that. If I'm not wrong when you create the dialog with $mdDialog.alert({..}) for example (and overriding all predefined properties to create actually a custom one) then the order is right. Don't see obvious reason for that behavior in the source but honestly didn't spend too much time to investigate because right now it is good enough for my project.

[ThomasBurleson]

Not supported until v2.x

[enzonotario]

Hi, i put this in my css to solve the second backdrop:

._md-dialog-backdrop:nth-of-type(even) {
    z-index: 81;
}

._md-dialog-backdrop:nth-of-type(odd) {
    z-index: 79;
}

.md-dialog-container:nth-of-type(even) {
    z-index: 80;
}

.md-dialog-container:nth-of-type(odd) {
    z-index: 82;
}

It works for me for 2 dialogs using skipHide:true. Is it good? or wrong?

[char-chen]

@enzonotario For second backdrop, I tried your CSS and it doesn't seem to work. Anything else you did?

[enzonotario]

Hi @chenchfort . I use skipHide: true in the options object. The css is only for add a "second backdrop" for the second dialog, so the first dialog will be below the "second backdrop".
Now, can you open two dialogs?

I'm sorry but I don't speak english so well, but if I can, I'm willing to help you.

[enzonotario]

Sorry! reading again your comment I think that you already can open two dialogs! LOL (my english is SO poor).
Now... the previous code work for me in any previous version (I don't remember what version). Now it doesn't work.

With anuglar material v1.0.9 this code works:

.md-dialog-backdrop:nth-of-type(even) {
    z-index: 81;
}

.md-dialog-backdrop:nth-of-type(odd) {
    z-index: 79;
}

.md-dialog-container:nth-of-type(even) {
    z-index: 80;
}

.md-dialog-container:nth-of-type(odd) {
    z-index: 82;
}

I only remove the first _.

Regards!

[char-chen]

@enzonotario Thanks. It still doesn't work particularly in my case. I notice that the second backdrop shows up when I open up a container like md-select though.

[enzonotario]

Sorry! Try with this code:

.md-dialog-backdrop:nth-of-type(even) {
    z-index: 81;
}

.md-dialog-backdrop:nth-of-type(odd) {
    z-index: 79;
}

.md-dialog-container:nth-of-type(even) {
    z-index: 82;
}

.md-dialog-container:nth-of-type(odd) {
    z-index: 80;
}

[char-chen]

@enzonotario Still doesn't show the second backdrop on my regular parent dialog (md-select issue is resolved though). Can you provide a plunker? Thank you so much for the help!

[enzonotario]

Hi!
http://codepen.io/enzonotario/pen/vXmPzR

[efraimbart]

More reliable version of the above code.
Obviously only works for a second popup, no further than that.

.md-dialog-backdrop {
  z-index: 79;
}

.md-dialog-backdrop ~ .md-dialog-backdrop {
  z-index: 81;
}

.md-dialog-container {
  z-index: 80;
}

.md-dialog-container ~ .md-dialog-container {
  z-index: 82;
}

[relair]

A note to anyone that are about to try above solutions - changing the z-index of md-dialog-container prevents your md-select from closing by clicking elsewhere on the page (including the dialog it originates from). You can even see this on codepen enzonotario provided.

I think I have managed to fix this issue though:

.md-dialog-backdrop {
  z-index: 78;
}

.md-dialog-backdrop ~ .md-dialog-backdrop {
  z-index: 79;
}

md-backdrop.md-dialog-backdrop {
    z-index: 78;
}

.md-dialog-container {
  z-index: 78;
}

.md-dialog-container ~ .md-dialog-container {
  z-index: 80;
}

[abheist]

For confirm and alert dialog, it'll be better to use .parent with skipHide/multiple:

        var confirmDialog = $mdDialog.confirm({skipHide/multiple: true})
            .title('Please confirm')
            .textContent('Are you sure you want to delete this message?')
            .parent(angular.element(document.querySelector('#parentDialogId')))
            .ok('Yes')
            .cancel('No')
            .multiple(true);

        $mdDialog.show(confirmDialog).then(function(){}

skipHide for older versions & multiple for newer...