Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Multiple dialogs #7262

Closed
palavrov opened this issue Feb 24, 2016 · 14 comments
Closed

Multiple dialogs #7262

palavrov opened this issue Feb 24, 2016 · 14 comments

Comments

@palavrov
Copy link

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.
@ThomasBurleson ThomasBurleson modified the milestone: 1.0.6 Feb 24, 2016
@scriptsure
Copy link

+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
Copy link
Author

@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
Copy link
Contributor

Not supported until v2.x

@enzonotario
Copy link

enzonotario commented May 14, 2016

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

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

@enzonotario
Copy link

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

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

@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
Copy link

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

sin nombre

@char-chen
Copy link

@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
Copy link

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

@efraimbart
Copy link

efraimbart commented Jan 11, 2017

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

relair commented Jul 25, 2017

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

abheist commented Sep 6, 2017

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants