将引导模式与javascript链接

Question

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

我想将createOrder.html的模式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，但是javascript由于2个ID而无法正常运行，并且未取消隐藏模态内容。

下面应该解决它。

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

约翰，我相信您会喜欢这个模式插件，因为您说自己是Java程序员：

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

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

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

不再需要用于创建模式的HTML标记。