Javascript测试-通过Javascript触发模式弹出

Javascript quiz - trigger modal popup via Javascript

本文关键字：Javascript 模式 测试 -通过      更新时间：2023-09-26

我正试图通过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>

下面是一个工作代码片段：http://codepen.io/steveharrison/pen/ONgWdL

您的HTML看起来是正确的，$('#myModal').modal()是触发模态的正确方式。尝试使用以下JS，看看它是否有效（edit:忘记提及这一点，假设您有一个类为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/

要触发显示隐藏的模式，可以使用类似的东西

$('#myModal').modal('hide');

和

$('#myModal').modal('show');

所以不是

$("#myModal").modal();

您可以使用上面的代码

相关文章：