Modal zeigt nur dunklen Hintergrund

Question

Ich versuche, innerhalb eines RoR-Projekts ein Bootstrap-Modal zu erstellen.Ich verwende das Verb login, aber nicht Devise.Ich versuche nur, das Modal ohne die Komplexität des Hinzufügens von Devise herauszufinden!

Es scheint, dass ich den Server erreiche, nachdem ich auf den Anmeldelink geklickt habe, aber ich erhalte nur eine graue Einblendung!

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 

Konsolenausgabe

GET „/login“ für 127.0.0.1 wurde am 28.07.2014 um 16:38:59 -0700 gestartet

Verarbeitung durch SiteController#login als JS

Gerendert site/_login.html.erb (0,0 ms)

Gerendert site/login.js.erb (1,0 ms)

Answer 1

Das Markup Ihres Modals scheint falsch zu sein.Sieht aus, als hätten Sie es einem alten Bootstrap-2-Beispiel entnommen?Vergleichen Sie es mit den Beispielen in http://getbootstrap.com/javascript/#modals .

Zu den Problemen in Ihrem Code gehören:

• Sie sollten das nicht verwenden hide oder in Klassen
• Fehlen modal-dialog Und modal-content <div>S

Auf welcher Ressource/welchem ​​Beispiel haben Sie Ihren Code basiert?