Javascript 测验 - 通过 Javascript 触发模式弹出窗口

Question

我正在尝试通过 Javascript 手动触发模式弹出窗口 $("#myModal").modal() 正如你所看到的，我将它插入到这个函数中，该函数分析正确的答案并显示短信但是没用。

这是我的代码:

function showFinalResults() {
          $("#myModal").modal()
          content.innerHTML = "<h3>WELL DONE!</h3>" +
         "<p>You're amazing for taking this quiz. Not many people challenge themselves every now and then. It's always good to stay confident with any challenges that may come your way.</p>" +
          "<h3>" + score + " out of " + quiz.length + " questions, " +
          Math.round(score / quiz.length * 100) + "%<h3>";
         } 

这是模态的 html:

<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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>

</div>

模态脚本:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

这是一个有效的代码片段:http://codepen.io/steveharrison/pen/ONgWdL

您的 HTML 看起来正确，并且 $('#myModal').modal() 是触发模式的正确方法。尝试使用以下 JS 并查看它是否有效(编辑:忘记提及这一点假设您有一个带有 open-modal 类的按钮元素，如上面的 CodePen 所示)。

$(document).on('ready', function() {
  $('.open-modal').click(function() {
     $('#myModal').modal();
  });
});

我的猜测是，当您尝试设置模式的内容时出现错误...检查您的控制台并查看是否有任何错误。

更新

它不起作用，因为手动定义了一个 $ 函数，该函数与 jQuery 的 $ fn 冲突...并且两者的行为完全不同(因此例如，在 content 等元素上设置 .innerHTML 无法按预期工作)。我用常规的 jQuery 选择器替换了这个 $ fn，添加到上面包含的模态 HTML 中，现在它可以工作了(不完整，但模态有效): https://jsfiddle.net/th8dvbo2/3/