ブートストラップモーダルは、JavaScriptで提示しようとしているときに定義されていません。

したがって、私はブートストラップモーダル内に作成され提示された<canvas>ゲームで作業しています。私はスコアオーバーレイ/登録/リプレイのための3つのボタンで私のキャンバスの上に新しい（スタック）モーダルを提示するgameOverで呼び出されるjavascript関数を書こうとしています。ブートストラップモーダルは、JavaScriptで提示しようとしているときに定義されていません。

私の最初のモーダルはdata-toggleでHTMLの中に表示され、うまくいきますが、2番目のモーダルを上に（JavaScriptで）表示しようとすると、定義されていないと表示されるようです。

私のコードはJSFiddleです。
（この例では、私のキャンバスドローメソッドの2番目のモーダルを例として呼び出しますが、別のボタン、他のイベントリスナーなども試みました。問題は常に同じです）。

ボタンを使ってゲームオーバー画面を表示する方が良い場合は、私は提案をすることができます。私はキャンバスにボタンを描画しないようにしたいのですが、座標を取得してそれをクリックするようにしたいのです。

ありがとうございます。

出典

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で提示しようとしているときに定義されていません。

答えて

関連する問題