Bootstrap 模态窗口奇怪的显示

Question

我正在使用 ajax 远程服务器动态加载测试 Boostrap 3 模式 在加载模态窗口之前是正确的（白色背景），但是一旦执行 ajax 请求并将 dat 加载到模态内容中，模态页眉（标题）和模态页脚（按钮）将以透明背景显示

我的模态是标准的 Bootstrap 示例：

        #myModal.modal.fade{ tabindex: "-1" ,role: "dialog", :'aria-labelledby' => "myModalLabel",  :'aria-hidden' => "true"}
        .modal-dialog
            .modal-header
                %button.close{type: "button",  :'data-dismiss' => "modal" }
                    %span{:'aria-hidden' => true}
                        ×
                    %span.sr-only
                        = t(:close, scope: :application).capitalize
                %h4#myModalLabel.modal-title
                    = t(:select_album_owner, scope: :album).capitalize
            .modal-content
                = "Loading..."
            .modal-footer
                %button.btn.btn-default{type: "button",  :'data-dismiss' => "modal" }
                    = t(:close, scope: :application).capitalize
                %button.btn.btn-primary{type: "button",  :'data-dismiss' => "modal" }
                    = t(:select, scope: :application).capitalize

点击以下链接会执行ajax url请求

<a class="btn btn-success static-popup-link" data-target="#myModal" data-toggle="modal" href="http://localhost:3000/backoffice/users.js?locale=fr" remote="true" type="text"><span>rechercher</span></a>

users_controller 索引操作：

    class Backoffice::UsersController < ApplicationController

      respond_to :html, :js

      def index
        sort_order = "updated_at DESC , username"
        @users = User.order(sort_order).page params[:page]
        respond_with(@user)
      end

并且查看后台/users/index.js.erb 非常简单...用于测试

   <%=  @users.count %>

这行得通，用户数显示在模态窗格内（在 modal-content 中，替换“正在加载...”文本但页眉和页脚是透明的...

为什么？以及如何在包括页眉和页脚在内的所有模态面板中获得白色背景？

感谢您的建议..

Answer 1

您的标记似乎有误。 modal-content 应该包含 modal-header、modal-body 和 modal-footer，不是是他们的兄弟。仔细阅读the docs examples。另外，请考虑使用 Bh 之类的内容。