链接不会打开引导模式答案

【问题标题】：Link won't open Bootstrap modal链接不会打开引导模式
【发布时间】：2025-12-16 14:00:01
【问题描述】：

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

这是我的 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();
      }



    }

【问题讨论】：

怎么会有人帮助你处理这么少的信息？请至少提供一些代码或codepen
在“引导模式”下发布代码几乎是不可能的，所以我发布了这个然后编辑它。
您在控制台中看到任何错误吗？ *.com/questions/13183630/…
How to open a Bootstrap modal window using jQuery?的可能重复
最小的努力？这个问题是your previous question的延续

标签： jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

尝试摆脱 loadModal 函数并使用：

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

可能需要从您的模式中删除“隐藏”类。

【讨论】：

很高兴为您提供帮助！ :)

【解决方案2】：

您提供的代码似乎工作正常。我只删除了与 sn-p 无关的东西。你的代码中一定有其他东西影响了模式。

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>

【讨论】：

«您提供的代码似乎工作正常»，基本上不是答案。它应该是带有 Fiddle 演示的评论。 --- 现在，我会是一个 “按部就班的坏蛋” 来给你投反对票……这个问题是 OP 的 previous question 的延续，他似乎没有这样做最小的努力。我为您花费的时间投票赞成您的回答。 --- 我建议 OP 在这一点上阅读教程或聘请开发人员。 OP 可能正试图从免费的编码服务中受益（虽然我可能错了）。