Vue-js-modal: Multiple modals at the same time

[Landen13]

Is it possible to handle multiple modals at the same time? Every modal has it's own z-index (depending on their order in template section), so it's not possible now to switch between modals with .show method without hiding them.

I think it would be great to add some sort of method, which will help to focus modal by name, if multiple modals are opened at the same time. It may be a CSS class v-modal--focused with high z-index value.

What do you think about this?

This will help a lot when working with forms inside modals, especially if this forms are complex.

[Landen13]

Well, I have added toggleFocus method to the plugin. Works like this:

this.$modal.toggleFocus(currentModalName, {}, false);
this.$modal.toggleFocus(targetModalName, {}, true);

It just toggles class 'focus' for overlay, which changes z-index of the overlay from 999 to 1000.
Not sure if we need 'params' here (empty object in the example).

[euvl]

Nope, its not supported. But if you need this functionality - you can try to create a wrapper for your modal and keep zIndexes somewhere to control which modal is on top.

[TheGitPanda]

In my case I have a component modal that opens with a prompt dialog to confirm a user action. I ended up adding this to my stylesheet:

[data-modal="dialog"] + [data-modal] {
  z-index: 998;
}

Because by default, the modal appears to have a z-index: 999; set.

[Landen13]

@TheGitPanda yeah, it works, but what if you have a lot of modals and need to control all of them? It's a complex question, z-index can help only in a particular case.

[TheGitPanda]

@Landen13 I see. But out of curiosity, how come there are so many modals on screen? Especially since the users only focused on one at a time. Could a tab component inside one modal which paginates through steps could help your situation?

Maybe the owner need some sort of real case usage to help explain why this feature is needed 🤘

[euvl]

The last comment is a very good one. Fixing theoretical things or bad UX (like billion of modals in the same time) is not something I would want to spend my spare time on 😄

[hvp130230]

@Landen13 I have a similar situation where I want to show multiple modals side by side(draggable) with no overlay and each with its own html. Can you please let me know how you achieved this?

[euvl]

You cannot achieve this with this plugin @hvp130230

[jakubkeller]

Sounds like poor UI design rather than limitations with a component.