试图通过javascript呈现引导模式时未定义引导模式

因此，我正在开发一个

游戏，它是在引导模式中创建和呈现的。我正在尝试编写一个javascript函数，该函数将在gameOver上调用，它将在我的画布上显示一个新的（堆叠的）模式，带有3个用于提交/注册/重播分数的按钮

我在html中通过

data toggle

显示我的第一个模式，效果很好，但当我尝试在顶部显示我的第二个模式（通过javascript）时，它似乎被报告为未定义

这是我的代码：。
（在本例中，我调用canvas draw方法中的第二个模态作为示例，但我也尝试了一个单独的按钮、其他事件侦听器等。问题总是一样的）

如果有更好的方式在屏幕上用按钮展示游戏，我愿意接受建议。但我想避免在画布上绘制任何按钮，并获得坐标来读取点击

---

提前感谢。

如果您想在另一个模态上打开模态，您必须调整

z-index

。使用这里提供的解决方案，您可以这样做

$（文档）.ready（函数（）{
让canvas=null；
让drawCanvas=（）=>{
canvas=document.getElementById（“myCanvas”）；
const context=canvas.getContext（“2d”）；
context.fillStyle=“#FF0000”；
fillRect（0,0630850）；
};
$（'#openBtn'）。单击（函数（）{
$（“#myModal”）.modal({
秀：真的
});
如果（！画布）{
画布（）；
}
setTimeout（函数（）{
$（'#myModal2'）。模态({
秀：没错，
});
}, 2000)
});
$（文档）.on（'show.bs.modal'，'.modal'，函数（事件）{
变量zIndex=1040+（10*$（'.model:visible'）。长度）；
$（this.css（'z-index'，zIndex）；
setTimeout（函数（）{
$（'.modal background'）.not（'.modal stack'）.css（'z-index'，zIndex-1）.addClass（'modal-stack'）；
}, 0);
});
});

JS-Bin
堆叠引导模式示例。
×
模式2
对话框/模式的内容位于此处。




心满意足







×
模式3
对话框/模式的内容位于此处。










×
模式4
对话框/模式的内容位于此处。
如果要在另一个模态上打开模态，则必须调整
z-index
。使用这里提供的解决方案，您可以这样做


$（文档）.ready（函数（）{
让canvas=null；
让drawCanvas=（）=>{
canvas=document.getElementById（“myCanvas”）；
const context=canvas.getContext（“2d”）；
context.fillStyle=“#FF0000”；
fillRect（0,0630850）；
};
$（'#openBtn'）。单击（函数（）{
$（“#myModal”）.modal({
秀：真的
});
如果（！画布）{
画布（）；
}
setTimeout（函数（）{
$（'#myModal2'）。模态({
秀：没错，
});
}, 2000)
});
$（文档）.on（'show.bs.modal'，'.modal'，函数（事件）{
变量zIndex=1040+（10*$（'.model:visible'）。长度）；
$（this.css（'z-index'，zIndex）；
setTimeout（函数（）{
$（'.modal background'）.not（'.modal stack'）.css（'z-index'，zIndex-1）.addClass（'modal-stack'）；
}, 0);
});
});

JS-Bin
堆叠引导模式示例。
×
模式2
对话框/模式的内容位于此处。




心满意足







×
模式3
对话框/模式的内容位于此处。










×
模式4
对话框/模式的内容位于此处。