链接不会打开Bootstrap模式

问题描述 投票：0回答：2

我设法在另一个项目的页面加载中打开其中一个讨厌的小东西，但是在这个中，当我点击“帮助”链接时，模态将不会加载。

这是我的html文件中最重要的代码：

<!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>

这里是代码，该函数应该使模态出现在我的js文件中：

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

编辑＃2：我将我的代码减少到我认为的基本位，因为这个网站告诉我这样做，但是因为没有人能找到问题，所以这里是完整的HTML文件和完整的JS文件：

    <!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>

这是JS文件：

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();
      }



    }
jquery html twitter-bootstrap bootstrap-modal
2个回答
1
投票

尝试远离loadModal函数并使用：

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

可能需要从模态中删除“隐藏”类。

1
投票

您提供的代码似乎工作正常。我只删除了与代码段无关的内容。您的代码中必须存在影响模态的其他内容。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.