javascript - 动态后退按钮可导航回您来自的模式

Question

这是在 Bootstrap 4 上。
我正在构建一个网站，它们有 17 种不同的模态，但每个模态中的特定单词都链接到不同的模态，因此如果您想了解更多有关它们的信息，可以。问题是，如果您想返回到上一个模式，则必须关闭第二个模式，然后返回并打开原始模式。

示例:
模态 1 链接到模态 3、5、8 和 9。
模态 11 链接到模态 4、5、8 和 2。

有没有办法在 JavaScript 中创建一个动态后退按钮，允许用户返回到他们来自的上一个模式？

附注我不知道要包含代码的哪一部分，因为它们有太多模态，而这是普通的 bootstrap 4。

但这就是单词与不同情态动词的链接方式

<a data-dismiss="modal" data-toggle="modal" href="#back-and-leg-pain">lower back and leg pain</a>

P.P.S。我可以尝试不忽略之前的模式，但我担心它会给用户带来巨大的困惑。

Answer 1

您的目标听起来正是堆栈的设计目的，我们可以使用存储在全局变量中的简单数字数组来实现。当前变量可以帮助我们跟踪当前位置，而不会妨碍返回。

var modal_stack = [];
var current;

function go_modal(destination){
 $('.modal').modal('hide');
 modal_stack.push(current);
 current = destination;
 $('#modal-'+destination).modal('show');
}
function back_modal(){
 $('.modal').modal('hide');
 $('#modal-'+modal_stack.pop()).modal('show');
}