引導模態甚至在它被稱爲

之前就會阻止基礎元素。即使在調用之前，我的引導模態也會阻止底層頁面的內容。如果屏幕截圖下方顯示的鏈接存在，則在調用模式之前無法訪問它。它充當一個層。一旦調用模態，我們又可以訪問基礎元素。引導模態甚至在它被稱爲

訪問莫代爾前：

enter image description here

一旦莫代爾訪問：

enter image description here

這裏是我的代碼在show.html.erb。如何解決它？我們需要在我們的文檔中保留我們的Modal代碼嗎？

<!-- Modal for uploading Profile Image --> 
<div class="modal fade" id="myPicUploadModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button> 
     <h4 class="modal-title" id="myModalLabel">Upload Picture</h4> 
     </div> 
     <div class="modal-body"> 
     <!-- Showing Exisiting Profile Image --> 
     <% if @user.avatar.present? %> 
     <%= image_tag @user.avatar.url(:profile), class: "img-thumbnail" %> 
     <%else%> 
     <%= image_tag "missing-profile.png", class: "img-thumbnail" %> 
     <%end%> 
     <p> </p> 
     <!-- Form to upload new pic --> 
     <%= simple_form_for @user do |f| %> 
     <%= f.input :avatar, label: false %> 
     </div> 
     <div class="modal-footer"> 
     <%= f.submit "Save", class: "btn btn-primary" %> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <%end%> 
     </div> 
    </div> 
    </div> 
</div> 

<div ng-controller = "userLeftPanelCtrl" ng-init = "init()"> 
<!-- Left Panel of User --> 
<div class="well UserProfileLeftPane span2" > 
    <!-- Panel options of User --> 
    <!-- Profile image of user --> 
    <div class="UserProfileImageLeftBar"> 
    <% if @user.avatar.present? %> 
     <%= image_tag @user.avatar.url(:profile), class: "img-thumbnail" %> 
    <%else%> 
     <%= image_tag "missing-profile.png", class: "img-thumbnail" %> 
    <%end%> 
    <%= link_to '#' do %> 
     <span class="label label-primary" data-toggle="modal" data-target="#myPicUploadModal" >Upload Pic</span> 
    <%end%> 
    </div> 
    </div> 
    </div>

來源

2014-09-30 Rahul Dess

你試過隱藏，只顯示活動時？這樣的：

.modal-body, 
.modal-footer { 
    display: none; 
}

和活躍的時候將其設置爲：

.modal-body.active, 
.modal-footer.active { 
    display: block; 
}

來源

2014-09-30 21:31:50

模態代碼在你的HTML不要緊，因爲.modal類的應設置CSS顯示property到none的地方（不佔用空間）。

您的代碼（Javascript或CSS）中的某些內容在初始化時將CSS display property設置爲block。可能由於內聯CSS（添加style =「display：block」），因爲關閉了模式，從而刪除了style="display:block"解決了您的問題。請注意，初始化時，即使由於設置opacity爲0的.fade類，顯示已被設置爲阻止，模式也不可見。

你必須找出你的代碼中的CSS display property爲block。

來源

2014-09-30 21:36:55

嘿，我已經嘗試了幾個地方..但沒有運氣..我仍然不清楚爲什麼我的模態雖然隱藏..但顯示在開發人員的工具和它的確在它下面的阻塞內容..可能是什麼原因。 – 2014-10-02 16:50:40

我把$('.modal').hide();模態初始化後。工程，雖然有很多方法可以解決這個問題。

來源

2014-12-31 19:09:10 Tim

引導模態甚至在它被稱爲

回答

相關問題