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无法正常运行，并且没有取消隐藏模态内容。

下面应该解决它。

navbar.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>

Answer 2

John，我相信你会喜欢这个模态插件，因为你说你是一个java程序员：

http://nakupanda.github.io/bootstrap3-dialog/

通过在项目中引入此模态插件，您的“createOrder.html”应如下所示：

BootstrapDialog.show({....});

不再需要用于创建模态的Html标记。

用javascript链接bootstrap模式

2 个答案: