JSFiddle - React, Tailwind, and code Playground

by kukicvladimir

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>


  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" onclick="drawCanvas()">
    Open Modal
  </button>
  
    <!-- Stacked Modal -->
  <div class="modal fade" id="mySecondModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <p>
            Test
          </p>
          <input src="https://openclipart.org/image/2400px/svg_to_png/212963/BlueSquareButton.png" />
          <input src="https://openclipart.org/image/2400px/svg_to_png/212963/BlueSquareButton.png" />
          <input src="https://openclipart.org/image/2400px/svg_to_png/212963/BlueSquareButton.png" />

        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button id="closeButton" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <canvas id="myCanvas" width="630" height="850">
          </canvas>
        </div>
      </div>
    </div>
  </div>



</body>

CSS

body {
  padding: 0;
  margin: 0;
  width: 100%;
}


/* modal ============================================== */

#myModal {
  width: 100%;
  height: auto;
  text-align: center;
  padding-left: 0!important;
}

#myModal .modal {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

#myModal .modal-dialog {
  height: auto;
  margin-top: 0;
}

#myModal .modal-content {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

#myModal .modal-body {
  padding: 0;
  !important;
}

@media (max-width: 630px) {
  #myModal .modal-dialog {
    margin: 0;
  }
}

@media (min-width: 630px) and (min-height: 850px) {
  #myModal .modal-content,
  #myModal .modal-body,
  #myCanvas {
    width: 630px;
    height: 850px;
  }
}

#closeButton {
  top: 1%;
  right: 2%;
  position: absolute;
  z-index: 3;
}

#myCanvas {
  width: 100%;
  vertical-align: bottom;
}

JavaScript

let secondModal = () => {
  menu = document.getElementById("mySecondModal");
  console.log(menu);
  menu.style.display = 'block';
}

let drawCanvas = () => {

  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");

  context.fillStyle = "#FF0000";
  context.fillRect(0, 0, 630, 850);

  secondModal();
};