Vue-js-modal: Close all open modals? Any way to do it or a missing feature?

[burzum]

There is a case when I want to open a new modal but close all others that are open.

So instead of providing the name of each modal in every spot where a close can be triggered, I would prefer if I could simply do a "close all" somehow. Any suggestions how to get this done?

[adamreisnz]

I'd also like to know. We need to close all/any modals that are open for example when the user is logged out.

A this.$modal.closeAll() would make sense.

[burzum]

@euvl any recommendation on how to tackle this problem?

I can't find a list of modals are something. Guess I would have somehow to fire a global event that goes by a selector and closes them all somehow? I don't mind implementing it but it's not that easy for me.

[adamreisnz]

@burzum looks like there's an array of modals that is stored in the ModalContainer class:

https://github.com/euvl/vue-js-modal/blob/master/src/ModalsContainer.vue#L38

Simplest solution appears adding a removeAll method to the modals container, with similar code to the one in remove, looping all of the modals and closing/removing them all.

In fact the remove code could also be optimised by using a map rather than an array, based on ID, so that the modals don't have to be looped each time to close it. Then again, there are unlikely to be many modals that are open at any given time so that's not that big of a deal.

Anyway, once that method is in place, it just needs to be exposed/made accessible from the global modal service/object.

[trandaison]

@burzum If you are using __Dynamic Modals__, you can bind a key to the modal-container, when you want to close all modals, just change the value of key.

In my case, I want to close all modals on the route changes, then I'm doing something like this.
```html

[Kylexii]

@trandaison good idea! useful in SPA when route changes, kind of tricky though

[JackEdwardLyons]

Any news on the closeAll option?

[euvl]

Added hideAll for dynamic modals

[nezaboravi]

am getting hideAll is not a function

[Grinnbob]

Solution

In template \

this.$refs["modal_name"].modals = []