2014-10-05 250 views
0

我正在測試Boostrap 3模式與ajax遠程服務器動態加載 之前加載模式窗口是正確的(白色背景),但一旦執行ajax請求和dat加載到模態內容,模態頭(標題)和模態英尺(按鈕)的顯示用透明背景引導模式窗口奇怪顯示

我的模態是標準的自舉例如:

 #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 index動作:

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 

和視圖內勤/用戶/ index.js.erb的很簡單...測試

<%= @users.count %> 

這個作品中,用戶計數顯示在模態窗格內(在模態內容中,替換「正在加載...」文本但是頁眉和頁腳都是透明的...

爲什麼?以及如何在包括頁眉和頁腳在內的所有模態面板中獲得白色背景?

感謝您的建議..

回答

1

您的標記似乎是錯誤的。 modal-content應該包含modal-headermodal-bodymodal-footer是他們兄弟。請仔細閱讀the docs examples。另外,考慮使用類似Bh

+0

謝謝...我看了一下bh,但是使用Ajax請求插入遠程服務器的內容,我發現這個鏈接,工作fin w Rails 4,Bootstrap 3,simple_form 3.1.0.rc2:https:// github .com/jschr/bootstrap-modal/wiki/Ruby-on-Rails ---- AJAX-Modal-Example !! – erwin 2014-10-06 08:31:29