Hello I have a few modals to open on a page using the Non-invasive model to not block interaction.

Currently a new modal will overlap a previous modal.

Is there a way to automatically close any previous open modals before opening a new modal ?

So that the user only sees one modal open each time, improving the user experience.

So if user clicks progresively buttons modal1, modal2, model3 each modal will open but before opening the previous modal will automatically close.

Thank you in advance.

example snippet

https://mdbootstrap.com/snippets/standard/nick-kaynes/3937596