javascript - 将 Bootstrap 模式与 javascript 链接起来

Question

我的背景是 Java 和面向对象的编程，我才刚刚开始使用 bootstrap。我想使用 javascript 将模式加载到另一个页面，然后在单击按钮时显示它，但我不确定该过程。这甚至是解决此问题的正确方法还是 html/javascript 更程序化？

我想将 createOrder.html 中的模式加载到 navbar.html 中，我有以下内容。显然这不起作用，因为当我单击按钮时我只会看到一个变暗的屏幕，那么正确的方法是什么？

navbar.html

...
<script> 
$(function() {
$("#createOrder").load("createOrder.html"); 
}); 
</script> 

<button type="button" id="createOrderButton" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#createOrder">Create</button>
...

createOrder.html

<!-- Modal -->
<div class="modal fade" id="createOrder" tabindex="-1" role="dialog" aria-labelledby="createOrderLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Create Order</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</div>

作为旁注，我知道 bootstrap 允许您执行 $('#myModal').modal(show) 但是如果它的代码驻留在不同的页面上，我将如何调用该模态？如果我想坚持 MVC 架构，通过数据属性调用它不是更有意义吗？

Answer 1

您似乎有 2 个具有相同 ID 的 div 标签。

您正在加载一个 div#createOrder 并将其插入到您的 navbar.html 中的 div#createOrder

模态数据目标指向#createOrder，但由于 2 个 ID，javascript 无法正常运行，并且未取消隐藏模态内容。

下面应该修复它。

导航栏.html

<div id="createOrderHolder"></div>
<button type="button" id="createOrderButton" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#createOrder">Create</button>
<script> 
$(function() {
     $("#createOrderHolder").load("createOrder.html"); 
}); 
</script>