Bootstrap Modal does not work fully on CodePen

Question

I am trying to make a calculator in JavaScript. I'm almost at the end, so I added a modal via Bootstrap, which contains a list of instructions (somewhat like a guide). While modal work works fine on my local machine, it only works halfway in CodePen.

The problem is that clicking on the button causes the modality, but does not disappear if you click the Close button or even the cross icon on the modal. The modal seems to be disabled when it opens, and the only way to get everything that works again is to update the codepen link.

As I do this calculator for online exercises, I only need to send it using CodePen. So I have to do this job.

Here the relevant HTML is

<div id="instructions">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
      Launch Instructions
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Instructions</h4>
          </div>
          <div class="modal-body">
            <ul class="list-group">
              <li class="list-group-item">Click on the AC button before beginning each new calculation.</li>
              <li class="list-group-item">For square root of a number, first press the number then press the square root button.</li>
              <li class="list-group-item">An operation that results in a number too large to fit on the screen will display zero instead.</li>
              <li class="list-group-item">If a number has too many digits after the decimal point to fit on screen, some of the digits will be truncated.</li>
              <li class="list-group-item">Some operations like divide by zero, and square root of negative integers are not permitted.</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

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

  </div>

CodePen BootStrap CSS quickadd, JS jQuery, Bootstrap ( ), , . , -

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="4.js"></script>

CodePen . , , Pen , , .

Answer 1

, .

#instructions, , (#instructions)., ( #instructions) (<div class="modal-backdrop fade in"></div>), ( #instructions). z-index , .

div , . div CSS .

#instructions button {
    position: fixed;
    left: 44%;
    bottom: 0;
}

#instructions div.

#instructions{
  z-index: 1049;/*keeping z-index above 1040*/
  position: fixed;
  left: 44%;
  bottom: 0;
}

A , Chrome, FF. , .

z- FF Chrome. $('.parent').css('z-index');

Chrome z-index is set to 0

FF z-index is set to 'auto'

.

$(function(){
  $('.modal-body > span').html($('.parent').css('z-index'));
});

.parent{
      position: fixed;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="parent">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal testing</h4>
            </div>
            <div class="modal-body">
              z-index: <span></span>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Hide result

Answer 2

. html, bootstrap js:

<div class="modal-backdrop fade in"></div>

. - z-index. , bootstrap.js . mvc, script - . Beter js , html ...

this.$backdrop = $(document.createElement('div'))
    .addClass('modal-backdrop ' + animate)
    .appendTo(this.$body)

SO SOLUTION bootstrap.js - :

.appendTo(this.$body)  
//REPLACE TO THIS:
 .insertBefore(this.$element) 

2: script:

$('.modal').appendTo("body")

Solution3:
   css:

.modal-backdrop{display:none;}