1

So, I am working on a <canvas> game which is created and presented inside a bootstrap modal. I am trying to write a javascript function that will be called on gameOver that will present a new (stacked) modal on top of my canvas with 3 buttons for score submission/registration/replay.

I present my first modal by data-toggle inside my html and works fine, but when I try to present my second modal on top (by javascript) it appears to be reported as not defined.

Here is my code: JSFiddle .
(in this case I call my second modal in my canvas draw method as an example, but I have also tried a separate button, other event listeners etc. The problem is always the same) .

If there is a better way to present that Game Over screen with buttons I'm open to suggestions. I want to avoid drawing any buttons in my canvas though and getting coordinates to read clicks on it.

Thanks in advance.

ioakeimo
  • 99
  • 7

1 Answers1

0

You have to adjust z-index if you want to open modal on top of another modal. Using the provided solution here Multiple modals overlay, you could do something like this.

$(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>
                 <h4 class="modal-title">Modal 1</h4>

            </div>
            <div class="modal-body"> 
              <canvas id="myCanvas" width="630" height="850">
          </canvas>
    <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>

            </div>
            <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <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>
                 <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> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>

            </div>
            <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <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>
                 <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> <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>

            </div>
            <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <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>
                 <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"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary">Save changes</a>

            </div>
        </div>
    </div>
</div> 
<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>
azs06
  • 3,467
  • 2
  • 21
  • 26