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＆＃39; s $ fn相冲突，因此无效（因此设置，比如，.innerHTML对content这样的元素没有按预期工作）。我用常规jQuery选择器替换了这个$ fn，在上面包含的模态HTML中添加了它，它现在正在工作（不完整，但模态是有用的）：https://jsfiddle.net/th8dvbo2/3/

Answer 2

要触发show hide的模态，你可以使用类似的东西

xamarin

和

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

所以而不是

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

您可以使用上面的代码

Javascript测验 - 通过Javascript触发模态弹出

2 个答案: