Twitter Bootstrap Modal在Rails中不显示窗口

Question

When I click on the link for my Modal Pop-Up Window, it fades then nothing. I do see a line appear on the page almost like the start of form. I have tried many suggestions, to remove hide from the class , realized I had both Bootstrap and Bootstrap-Modal in my application.js , so removed Modal , still no luck. Any suggestions/ideas?

My code is in the previous question, which is below. I did move my new_release.js.erb into my view/"controller_name" instead of assests/javascripts , like it was suggested.

Bootstrap Modal(previous question )

EDITED CODE

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

Just checked your code again there are couple of issues

Your modal code

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

is an empty div so it won't show up unless you have width and height on it

Your link

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

This will call up js to show your modal which is empty and then add content inside your modal which must be messing it up

Fix

Without ajax

Your modal should look like:

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

Your link

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

With Ajax:

Your modal:

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

Your link

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

Your js.erb file

$("#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

I had the same kind of issue, with a bootstrap modal window not showing up. I solved the issue by changing class="modal hide fade" to class="modal fade" .

There is a tutorial on this ( https://coderwall.com/p/ej0mhg/open-a-rails-form-with-twitter-bootstrap-modals ). It's quite concise and works perfectly, only with the modification I mentioned above.