Link won't open Bootstrap modal

Question

I managed to get one of these pesky little things to open on page load in another project, but in this one, the modal won't load when I click the "help" link.

Here is the most important code from my html file:

<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Bomb Defuser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id = "timeContainer">
  <span id = "time" style="font-size: 50px">02:00</span>
</div>
<div id = "bomb">
  <img src = "images/bomb.png" alt="bomb"></img>
  <a href = "#" style= "float:right;" onclick = "loadModal();">Help?</a>

  <div id="myModal" class="modal hide fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

And here is the code the function that's supposed to make the modal appear in my js file:

function loadModal(){
  $('#myModal').removeClass("hide").modal('show');
}

EDIT #2: I cut down my code to what I thought were the essential bits because this site tells me to do that, but since no one can find the problem here is the full HTML file and full JS file:

    <!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>Bomb Defuser</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">




<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>





<div id = "timeContainer"> <span id = "time" style="font-size: 50px">02:00</span> </div>



<div id = "bomb">

<img src = "images/bomb.png" alt="bomb"></img>
<a href = "#" style= "float:right;" onclick = "loadModal();">Help?</a>

<div id="myModal" class="modal hide fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

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

<button style= "color:red;" id = "1" onClick = "cut(this.id)">Cut the red wire</button> <button style = "color: blue" id = "2" onClick = "cut(this.id)">Cut the blue wire</button> <button style="color:green;" id = "3" onClick = "cut(this.id)">Cut the green wire</button>
<br>
<br>
<span id = "hint">(Check console for hint)</span>

<p><a href ="#" onclick = "startBeep()"> Try again?</a></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src = "bomb.js" type = "text/javascript"></script>

</body>
</html>

Here's the JS file:

function loadModal(){
        $('#myModal').removeClass("hide").modal('show');
    }

    // $("#bomb").hide();


    // var randomRoom = Math.floor(Math.random() * 5) + 1;

    var alreadyWon = false;

    var boom = new Audio("boom.mp3");

    var applause = new Audio("victory.wav");

    var beep = new Audio("beep1.wav");

    var shouldBeep = true;

    function stopBeep(){
        shouldBeep = false;
    }

    function startBeep(){
        shouldBeep = true;
    }

    boom.volume = 0.4;
    applause.volume = 0.4;

    var randomWire = Math.floor(Math.random() * 3) + 1;

    console.log(randomWire);

    var counter = 120;



    //okay, so how do I do this?  I assign a number value to each button
    //then if random = value of button just pressed, this.id or this.value or whatever,
    //trigger a victory

    function detonate(){
        stopBeep();
      //change image src to explosion, alt to explosion, and change size?
      $("img").hide();


      $("body").css("background", "url('images/explosion.png') no-repeat center center fixed");
      $("body").css("-webkit-background-size", "cover");
      $("body").css("-moz-background-size", "cover");
      $("body").css("-o-background-size", "cover");
      $("body").css("background-size", "cover");

  //     $("body").attr({
  //       "background" : "url('images/explosion.png') no-repeat center center fixed",
  //       "-webkit-background-size" : "cover",
  // "-moz-background-size" : "cover",
  // "-o-background-size" : "cover",
  // "background-size" : "cover"
  //     });


      //hide cut wire buttons
      $("button").hide();
      $("#time").hide();
      $("#timeContainer").hide();
      $("#hint").hide();

      $("p").delay(2500).fadeIn();
      boom.play();
    }

    function victory() {
        stopBeep();
      $("img").hide();

        $("body").css("background", "url('images/victory.png') no-repeat center center fixed");
      $("body").css("-webkit-background-size", "cover");
      $("body").css("-moz-background-size", "cover");
      $("body").css("-o-background-size", "cover");
      $("body").css("background-size", "cover");

  //      $("body").attr({
  //       "background" : "url('images/victory.png') no-repeat center center fixed",
  //       "-webkit-background-size" : "cover",
  // "-moz-background-size" : "cover",
  // "-o-background-size" : "cover",
  // "background-size" : "cover"
  //     });

      //hide cut wire buttons
      $("button").hide();
      $("#time").hide();
      $("#timeContainer").hide();
      $("#hint").hide();


      $("p").delay(2500).fadeIn();



      alreadyWon = true;
      applause.play();
}

$("p").click(function(){
     location.reload();
});

    setTimeout(bombTimer, 1000 * 120);
    setTimeout(time, 1000 * 1);

    function timeConverter(t){
      var minutes = Math.floor(t / 60);
    var seconds = t - (minutes * 60);

    if (seconds < 10) {
      seconds = "0" + seconds;
    }

    if (minutes === 0) {
      minutes = "00";
    }
    else if (minutes < 10) {
      minutes = "0" + minutes;
    }

    return minutes + ":" + seconds;
    }

    function time(){
      counter--;

      if (shouldBeep === true)
        {
            beep.play();
        }


      counterConverted = timeConverter(counter);
      $("#time").text(counterConverted);
       setTimeout(time, 1000 * 1);
    }

    function bombTimer() {
      if (alreadyWon == false)
      {
      alert("Time's up!  Uh-oh!")

  detonate();
}

}




    function cut(buttonId){
      if (buttonId == randomWire)
      {
        alert("Great job!");
        victory();
      }
      else
      {
        alert("Wrong wire!  Uh oh!");
        console.log(buttonId);
        //WHY DOES THIS SHOW UP AS UNDEFINED!?
        detonate();
      }



    }

how is anyone supposed to help you with that tiny bit of information? please provide some code or codepen at least — davbuc, Feb 18 '19 at 21:26
Posting code in "guided mode" is darn near impossible, so I posted this then edited it. — DennisM, Feb 18 '19 at 21:28
Do you see any error in the console? https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery — Lahar Shah, Feb 18 '19 at 21:37
Possible duplicate of [How to open a Bootstrap modal window using jQuery?](https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery) — Lahar Shah, Feb 18 '19 at 21:40
**Minimal efforts?** That question is the continuation of [your previous question](https://stackoverflow.com/questions/54737184/bootstrap-modal-darkens-screen-but-wont-show) — Louys Patrice Bessette, Feb 18 '19 at 21:47
bomb.js:138 Uncaught (in promise) DOMException bomb.js:3 Uncaught TypeError: $(...).removeClass(...).modal is not a function at loadModal (bomb.js:3) at HTMLAnchorElement.onclick (index.html:36) — DennisM, Feb 18 '19 at 21:58

score 4 · Accepted Answer · answered Feb 18 '19 at 21:37

4

Try getting away from the loadModal function and use:

<a href="#" style="float:right;" data-toggle="modal" data-target="#myModal">Help?</a>

May need to remove the class "hide" from your modal.

answered Feb 18 '19 at 21:37

JoshuaEvan

66
6

score 1 · Answer 2 · edited Feb 18 '19 at 21:55

The code you provided appears to be working fine. I've only removed things that weren't relevant to the snippet. There must be something else in your code that's affecting the modal.

function loadModal() {
  $('#myModal').removeClass("hide").modal('show');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="timeContainer">
  <span id="time" style="font-size: 50px">02:00</span>
</div>

<div id="bomb">
  <img src="images/bomb.png" alt="bomb" />
  <a href="#" style="float:right;" onclick="loadModal();">Help?</a>

  <div id="myModal" class="modal hide fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

*«The code you provided appears to be working fine»*, basically is not an answer. It should be a comment with a Fiddle demo. --- Now, I would be a *"by-the-book bad ass freak"* to downvote you here... This question is the continuation of OP's [previous question](https://stackoverflow.com/questions/54737184/bootstrap-modal-darkens-screen-but-wont-show) and he does not seem to do **minimal efforts**. I upvoted your answer for your time spent. --- I would suggest OP to read tutorial OR hire a developper at this point. OP may be trying to benefit from a free coding service (while I may be wrong). — Louys Patrice Bessette, Feb 18 '19 at 21:45

Link won't open Bootstrap modal

2 Answers2