远程模式不在引导程序3中显示页眉和页脚

Question

我正在使用Bootrap 3和远程模式来加载远程页面.代码类似于文档中指定的代码.页面的内容以模态加载,但是模态标题和包含关闭按钮的模态页脚未显示.

触发:

<a data-toggle="modal" data-remote="remote.html" video.id %}" 
data-target="#myModal"><button class="btn btn-success" >Edit details </button></a>

莫代尔:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

remote.html:

<p style="background-color:#ffffff">My name is duip </p>

Answer 1

remote.html必须返回完整的modal-dialog内容.

remote:如果提供了远程URL,则将通过jQuery的load方法加载内容并将其注入模态元素的根目录.

所以将remote.html更新为

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Modal title</h4>

        </div>
        <div class="modal-body">
          <p style="background-color:#ffffff">My name is duip </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>

演示:Plunker