Ruby：将简单表单嵌入 bootstrap 模态

Question

我想将我的简单表单显示为模态 window 但出了点问题。我可以看到页面变暗，但没有模态显示我的信息。

导航栏中的链接：

    .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 class:

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

Ruby：将简单表单嵌入 bootstrap 模态

Ruby: embding simple forms into bootstrap modal

ruby-on-rails

devise

bootstrap-modal

Ruby：将简单表单​​嵌入 bootstrap 模态

Ruby: embding simple forms into bootstrap modal

ruby-on-rails

devise

bootstrap-modal

Ruby：将简单表单嵌入 bootstrap 模态