Ruby：将简单的表单嵌入到引导模式中

Question

我想将我的简单表单显示到模式窗口中，但出现错误。我可以看到页面变暗，但没有模式显示与我的信息。

链接在导航栏：

.navbar.navbar-fixed-top.navbar 
     .container.fullwidth 
     .navbar-brand 
      = link_to "TRAVVLR", root_path 

     - if user_signed_in? 
      %ul.nav.navbar-nav.navbar-right 
       %li= link_to "Stad Toevoegen", new_city_path 
       %li= link_to "Uitloggen", destroy_user_session_path, method: :delete 
       %li= link_to "Help", root_path 
     - else 
      %ul.nav.navbar-nav.navbar-right 
       %li= link_to "Login", "#login", "data-toggle" => "modal" 
       %li= link_to "Sign up", "#sign_up", "data-toggle" => "modal" 

我application.html.haml：

!!! 5 
    %html 
     %head 
     %title Travvlr 
     = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true 
     = javascript_include_tag 'application', 'data-turbolinks-track' => true 
     = csrf_meta_tags 
     :javascript 
      $(function(){ 
      $("#myModal").modal({show:false} 
     ); 

     %body 
     = render 'layouts/navigation' 
     = render 'welcome/login_modal' 
     = render 'welcome/sign_up_modal' 
     = yield 
     = render 'layouts/footer' 

的sign_up_modal.html.erb：

<div class="modal hide fade in" id="sign_up"> 
     <div class="modal-header"> 
      <button class="close" data-dismiss="modal">x</button> 
      <h2>Sign Up</h2> 
     </div> 

     <div class="modal-body"> 
      <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
      <%= f.error_notification %> 
      <div class="form-inputs"> 
       <%= f.input :email, required: true, autofocus: true, input_html: { class: 'form_control' } %> 
       <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @validatable), input_html: { class: 'form_control' } %> 
       <%= f.input :password_confirmation, required: true, input_html: { class: 'form_control' } %> 
      </div> 
     </div> 

     <div class="modal-footer"> 
      <%= f.button :submit, "Sign up" %> 
      <p><a href="#" class="btn btn-small" data-dismiss="modal">Close</a></p> 
     </div> 

     <% end %> 
     <%= render "devise/shared/links" %> 
    </div> 

而且我application_helper.rb

module ApplicationHelper 
     def resource_name 
      :user 
     end 

     def resource 
      @resource ||= User.new 
     end 

     def devise_mapping 
      @devise_mapping ||= Devise.mappings[:user] 
     end 
    end 

任何想法？

Answer 1

在链接中添加data-target：

%ul.nav.navbar-nav.navbar-right 
    %li= link_to "Login", "#login", "data-toggle" => "modal", "data-target" => "#login" 
    %li= link_to "Sign up", "#sign_up", "data-toggle" => "modal", "data-target" => "#sign_up" 

在您的视图更改顶部的div类：

<div class="modal fade" id="sign_up" tabindex="-1" role="dialog" aria-labelledby="signUpLabel" aria-hidden="true">