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}
                        &times;
                    %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网址请求

<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 %>

这样做，用户数显示在模态窗格内（在模态内容中，替换＆＃34;加载...＆＃34;文本但页眉和页脚是透明的......

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

感谢您的建议..

Answer 1

您的加价似乎有误。 modal-content应该包含 modal-header，modal-body和modal-footer，不是是他们的兄弟< / em>的。更仔细地阅读the docs examples。另外，请考虑使用类似Bh的内容。

Bootstrap模态窗口奇怪的显示

1 个答案: