當試圖通過javascript呈現Bootstrap模式時未定義

因此，我正在創建一個<canvas>遊戲，該遊戲在引導模式中創建並呈現。我正在嘗試編寫一個將在gameOver上調用的javascript函數，該函數將在我的畫布上呈現一個新的（堆疊）模式，其中3個按鈕用於提交/註冊/重播。當試圖通過javascript呈現Bootstrap模式時未定義

我在我的html中展示我的第一個模態data-toggle，並且工作正常，但是當我嘗試在頂部呈現我的第二個模式時（按javascript），它似乎報告爲未定義。我的代碼：JSFiddle。
（在這種情況下，我在我的畫布繪製方法中調用了我的第二個模式，但我也嘗試了一個單獨的按鈕，其他事件偵聽器等等。問題總是相同的）。

如果有更好的方法來展示遊戲結束屏幕上的按鈕，我願意提供建議。我想避免在畫布中繪製任何按鈕，並獲取座標來讀取它上的點擊。

在此先感謝。

來源

2017-07-10 ioakeimo

如果要打開另一個模態的模態，則必須調整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>

來源

2017-07-10 11:40:26 azs06

當試圖通過javascript呈現Bootstrap模式時未定義

回答

相關問題