When multiple pop-up modal are opened at the same time, how to ensure that only one is displayed at a time and the one behind it is closed?

[a982246809]

When multiple pop-up modal are opened at the same time, how to ensure that only one is displayed at a time and the one behind it is closed?
同时打开多个弹窗时 , 怎么确保一次只显示一个 , 关闭一个在显示后面的一个
example:
pushModal(1) pushModal(2) pushModal(3)
At first, only 3 is displayed. When 3 is turned off, 2 is displayed, and then 1 is displayed.
一开始只显示3 , 当关闭3后再显示2, 再1

[Jenesius]

Hi!
At the moment there is no such possibility. This is an interesting case - I will try to implement it. I'll add a variable to the configuration.

[a982246809]

There is another question, Can delete specified modal, for example:
还有一个问题 , 可以删除指定窗口 , 例如:
pushModal(1) pushModal(2) pushModal(3)
popModal(2)

[Jenesius]

@a982246809 I'll think about how to do this more beautifully.
There are two ways:

• Using close

const modal1 = await pushModal(1);
const modal2 = await pushModal(2);
const modal3 = await pushModal(3);

modal2.close();

• Using cheat

const queue = getQueueByNamespace();
queue.splice(1, 1);

[Jenesius]

Regarding the top question, I will try to quickly outline the functionality. Now in the configuration it will be possible to set the ability to hide modal windows and display only the last one.
We need to think about saving the state of the modal windows that we are going to hide. I'm thinking of using v-show for this. This approach will not destroy the modal window, but will only hide it from the page.

[a982246809]

const queue = getQueueByNamespace();
queue.splice(1, 1);

This method works. It would be great if there is a store key in ModalObject. I can delete the specified modal in the following way.
这种方法可以 , 如果在ModalObject 中有 store 的key 就好了 , 我可以通过一下方式删除指定modal
queue.splice(queue.findIndex(v=>v.storeKey==='demo'), 1);

[a982246809]

Regarding the top question, I will try to quickly outline the functionality. Now in the configuration it will be possible to set the ability to hide modal windows and display only the last one.关于最重要的问题，我将尝试快速概述其功能。现在，在配置中可以设置隐藏模式窗口并仅显示最后一个窗口的功能。 We need to think about saving the state of the modal windows that we are going to hide. I'm thinking of using v-show for this. This approach will not destroy the modal window, but will only hide it from the page. 我们需要考虑保存要隐藏的模式窗口的状态。我正在考虑为此使用 v-show 。这种方法不会破坏模式窗口，而只会将其从页面中隐藏。

Yes, it would be cool if you could add a switching transition animation
可以的 , 如果能添加切换的过渡动画, 会很酷

[Jenesius]

@a982246809
Version 1.11.8:

import {config} from "jenesius-vue-modal";

config({
  singleShow: true
})

Docs about this option.
If you set this option, all modal windows except the last one will be hidden using (v-show). This is done so as not to lose the state of the component.

[Jenesius]

Regarding the second problem: there is no solution yet. However, I remembered another way.

import {pushModal, closeById} from "jenesius-vue-modal"


await pushModal(Modal);
const modal = await pushModal(Modal);
await pushModal(Modal);
.
.
.
closeById(modal.id);

[a982246809]

Regarding the second problem: there is no solution yet. However, I remembered another way.关于第二个问题：目前还没有解决方案。不过，我又想起了另一种方式。

import {pushModal, closeById} from "jenesius-vue-modal"


await pushModal(Modal);
const modal = await pushModal(Modal);
await pushModal(Modal);
.
.
.
closeById(modal.id);

Sometimes getting a modal object in different files can be difficult.
有时候在不同文件中 , 获取modal对象 比较困难

[a982246809]

@a982246809 Version 1.11.8: 版本 1.11.8 ：

import {config} from "jenesius-vue-modal";

config({
  singleShow: true
})

Docs about this option.关于此选项的文档。 If you set this option, all modal windows except the last one will be hidden using (v-show). This is done so as not to lose the state of the component. 如果设置此选项，除最后一个之外的所有模式窗口都将使用 ( v-show ) 隐藏。这样做是为了不丢失组件的状态。

This option works best for individual Modal and seems to be necessary in some situations, such as:
这个选项对单个弹窗最好也起作用 , 似乎是有必要的在一些场景 , 例如:
pushModal(FooComp,null,{singleShow: false})