Domanda

Sto cercando di creare un bootstrap modale all'interno di un progetto ROR.Sto usando il login del verbo, ma non usare idei.Sto solo cercando di capire il modale senza la complessità di aggiungere Digitare!

Mi sembra di raggiungere il server dopo aver fatto clic sul link di accesso ma ottengo solo la sovrapposizione grigia!

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")
.

Sito # login

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

Uscita console

Iniziato GET "/ LOGIN" per 127.0.0.1 al 2014-07-28 16:38:59 -0700

Elaborazione da SiteController # Accedi come JS

Sito reso / _login.html.erb (0.0ms)

rendering sito / login.js.erb (1.0ms)

È stato utile?

Soluzione

Il markup del tuo modal sembra errato.Sembra che tu l'abbia preso da un vecchio esempio di bootstrap 2?Confrontalo contro gli esempi in http://getboowstrap.com/javascript/#modals . I problemi nel tuo codice includono:

    .
  • Non dovresti usare le classi hide o in
  • Manca modal-dialog e modal-content <div>s

Quale risorsa / esempio hai basato il tuo codice di spento?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top