因此，我正在創建一個<canvas>遊戲，該遊戲在引導模式中創建並呈現。我正在嘗試編寫一個將在gameOver上調用的javascript函數，該函數將在我的畫布上呈現一個新的（堆疊）模式，其中3個按鈕用於提交/註冊/重播。當試圖通過javascript呈現Bootstrap模式時未定義
我在我的html中展示我的第一個模態data-toggle，並且工作正常，但是當我嘗試在頂部呈現我的第二個模式時（按javascript），它似乎報告爲未定義。我的代碼：JSFiddle。
（在這種情況下，我在我的畫布繪製方法中調用了我的第二個模式，但我也嘗試了一個單獨的按鈕，其他事件偵聽器等等。問題總是相同的）。
如果有更好的方法來展示遊戲結束屏幕上的按鈕，我願意提供建議。我想避免在畫布中繪製任何按鈕，並獲取座標來讀取它上的點擊。
在此先感謝。
如果要打開另一個模態的模態，則必須調整z-index。使用這裏提供的解決方案Multiple modals overlay，你可以做這樣的事情。
$(document).ready(function() {
let canvas = null;
let drawCanvas =() => {
canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, 630, 850);
};
$('#openBtn').click(function() {
$('#myModal').modal({
show: true
});
if (!canvas) {
drawCanvas();
}
setTimeout(function() {
$('#myModal2').modal({
show: true,
});
}, 2000)
});
$(document).on('show.bs.modal', '.modal', function(event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Stacked Bootstrap Modal Example.</h2>
<a id="openBtn" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
\t <h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body"> \t
\t \t \t \t <canvas id="myCanvas" width="630" height="850">
</canvas>
\t \t \t \t <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a>
\t <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal fade rotate" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
\t <h4 class="modal-title">Modal 2</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog/modal goes here.
<br>
<br>
<p>come content</p>
<br>
<br>
<br> \t <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a>
\t <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
\t <h4 class="modal-title">Modal 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog/modal goes here.
<br>
<br>
<br>
<br>
<br> \t <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a>
\t <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal4">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
\t <h4 class="modal-title">Modal 4</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog/modal goes here.</div>
<div class="modal-footer"> \t <a href="#" data-dismiss="modal" class="btn">Close</a>
\t <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div> \t
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>