Twitter Bootstrap Modal在Rails中不顯示窗口

Question

當我單擊“模態彈出窗口”的鏈接時，它消失，然后什么也沒有。 我確實看到頁面上幾乎像表格的開頭一樣出現一行。 我嘗試了許多建議，以從class刪除hide ，意識到我的application.js同時包含了Bootstrap和Bootstrap-Modal ，因此刪除了Modal ，但還是沒有運氣。 有什么建議/想法嗎？

我的代碼在下面的上一個問題中。 我確實將new_release.js.erb移到了我的view /“ controller_name”中，而不是像建議的assests/javascripts 。

Bootstrap Modal（上一個問題 ）

編輯代碼

Application.js

//= require bootstrap

Routes.rb

get "project/new_release" => 'project#new_release', :as => :new_release

controller.rb

def new_release
respond_to do |format|
format.html
format.js
end
end

project / index.html.erb

<div id="modal-window" class="modal hide fade" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>

<%= link_to 'Add release', new_release_path, remote: true %>

project / _new_release.html.erb

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body" style="height:540px; max-height:540px; 
width:630px; max-width:630px;">
Test Modal
</div>

<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>

views / project / new_release.js.erb

$("#modal-window").html("<%=j render 'project/new_release' %>");
$('#modal-window').modal('show'); // this will show up your modal once it has its data

development.log

Started GET "/project/new_release" for 123.4.5.6. at Date/Time

AbstractController::ActionNotFound (The action'show' could not be found  
for ProjectController):
....
.... 
(50 lines of actionpack (3.2.13) process, calls, dispatch. journey call, rake call. 
C:/RailsIntaller/Ruby1.9.3/lib/ruby/1.9.1/webrick/httpserver.rb)

Rendered C:/RailsIntaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/
actionpack-3.2.13/lib/action_dispatch/middleware/templates/
rescues/unknown_action.erb within rescue/layout

Answer 1

再次檢查您的代碼，有幾個問題

您的模態代碼

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

是一個空的div，因此除非您有寬度和高度，否則它不會顯示

您的連結

<%= link_to 'Add release', new_release_path, {:remote => true, 'data-toggle'=> "modal", 'data-target' => '#modal-window'}  %>

這將調用js以顯示您的模態為空，然后在模態內添加必須弄亂它的內容

固定

沒有ajax

您的模態應如下所示：

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    **here comes whatever you want to show!**
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

您的連結

<%= link_to 'Add release', new_release_path, 'data-toggle'=> "modal", 'data-target' => '#modal-window'  %>

使用Ajax：

您的模態：

<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

您的連結

<%= link_to 'Add release', new_release_path, remote: true %>

您的js.erb文件

$("#modal-window").html("<%=j render 'project/new_release' %>");
$('#modal-window').modal('show'); // this will show up your modal once it has its data 

Answer 2

對我來說，真正解決此問題的方法是將div類從modal hide fade更改為僅modal 。

Answer 3

我遇到了同樣的問題，沒有顯示引導模態窗口。 我通過改變解決問題class="modal hide fade"以class="modal fade" 。

對此有一個教程（ https://coderwall.com/p/ej0mhg/open-a-rails-form-with-twitter-bootstrap-modals ）。 它非常簡潔並且可以完美地運行，僅適用於我上面提到的修改。