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的加载方法并注入模态元素的根目录。

所以将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

Answer 2

正如@ArunPJohny所说，你必须返回整个modal-dialog内容。您可以使用布局来提供包含在不同框中的相同内容，例如

http://example.com/remote.html?layout=modal     # to use a modal layout
http://example.com/remote.html?layout=false     # to return the bare content

等

然后在您的控制器操作中检查params[:layout]并使用正确的布局进行渲染：

render layout: 'modal'

或

render layout: false

等

您的view/layouts/modal.html.erb应该是

<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"><%= yield %></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>
</div>

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

2 个答案: