title: Bootstrap Modal not working completely on CodePen
body: <p>I am attempting to make a Calculator in JavaScript. I'm almost at the end, so I added a modal through Bootstrap, which contains an instruction list(somewhat like a manual). While the modal works perfectly on my local machine, it works only halfway through in CodePen. </p>
  
  <p>The issue appears to be that a click on the button brings up the modal but it does not go away if you click on the "Close" button or even the "cross" icon on the modal. It looks like the modal is disabled when it opens up, and the only way to get everything working again is to refresh the codepen link.</p>
  
  <p>As I'm making this calculator for an online tutorial exercise, I need to submit it via CodePen only. So I've got to make this work.</p>
  
  <p>Here's the relevant HTML - </p>
  
  <pre><code>&lt;div id="instructions"&gt;
      &lt;!-- Button trigger modal --&gt;
      &lt;button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal"&gt;
        Launch Instructions
      &lt;/button&gt;
  
      &lt;!-- Modal --&gt;
      &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
        &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Instructions&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;ul class="list-group"&gt;
                &lt;li class="list-group-item"&gt;Click on the AC button before beginning each new calculation.&lt;/li&gt;
                &lt;li class="list-group-item"&gt;For square root of a number, first press the number then press the square root button.&lt;/li&gt;
                &lt;li class="list-group-item"&gt;An operation that results in a number too large to fit on the screen will display zero instead.&lt;/li&gt;
                &lt;li class="list-group-item"&gt;If a number has too many digits after the decimal point to fit on screen, some of the digits will be truncated.&lt;/li&gt;
                &lt;li class="list-group-item"&gt;Some operations like divide by zero, and square root of negative integers are not permitted.&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>In CodePen, I've added BootStrap through CSS quickadd, and for JS, I added jQuery and then Bootstrap(in that order), so I'm not sure why it doesn't work. I have followed the same order in my local files, where the modal works perfectly-</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="4.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here's the CodePen <a href="http://codepen.io/Nyxx/full/vLXddR/" rel="nofollow">link</a> for my calculator. Interestingly though, I made another Pen <a href="http://codepen.io/Nyxx/full/dGpdmZ/" rel="nofollow">here</a> where I was testing just the modal bit, and it works just fine here. </p>