modal only shows dark background

Question

I'm trying to create a bootstrap modal within an RoR project. I'm using the verb login, but not using Devise. I'm just trying to figure out the modal without the complexity of adding Devise!

I seem to reach the server after clicking on the login link but I only get gray overlay!

application.htm.erb

 <div class="container">
  <div class="well">
   <%= link_to 'login', login_url,
   {:remote => true,
    'data-toggle' =>  "modal",
     'data-target' => '#login',
      :class => "btn btn-primary "} %>
     </div>
  </div>
  <div id="login" class="modal hide fade"></div>

_login.html.erb

<div class="modal hide fade in" id="login">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">x</button>
    <h2>Sign in</h2>
  </div>
  <div class="modal-body">
    <h2>Login form will go here</h2>
  </div>
  <div class="modal-footer">modal footer text</div>
</div>

login.js.erb

$("#login-modal").html("<%= escape_javascript(render 'login') %>")
$("#login-modal").modal("show")

site#login

def login
  respond_to do |format|
     format.js
   end
end 

console output

Started GET "/login" for 127.0.0.1 at 2014-07-28 16:38:59 -0700

Processing by SiteController#login as JS

Rendered site/_login.html.erb (0.0ms)

Rendered site/login.js.erb (1.0ms)

Answer 1

Your modal's markup seems incorrect. Looks like you took it from an old Bootstrap 2 example? Compare it against the examples in http://getbootstrap.com/javascript/#modals .

Problems in your code include:

• You shouldn't use the hide or in classes
• Missing modal-dialog and modal-content <div>s

What resource/example did you base your code off of?