Question

当用户登陆我们的主页时，我无法将twitter bootstrap pop-over模式与设计登录/注册结合使用。我花了一些时间实施不同的方法，但仍然没有成功。截至目前，当我点击＆＃34;登录＆＃34;与模态相关联的按钮，网站刷新但没有模态。

apps / views / layout / _header.html.slim（我的application.erb文件调用其他部分）

li
  = link_to "Login", "data-toggle" => "modal", "data-target" => "#login_modal", :class => "btn btn-small"

li
  = link_to "Sign Up Free", "data-toggle" => "modal", "data-target" => "#sign_up_modal", :class => "btn btn-small"

我有两个几乎相同的部分（sign_up_modal，login_modal）......

<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">
        <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>
    <div><%= f.label :email %><br />
        <%= f.email_field :email, :autofocus => true %></div>
    <div>
        <%= f.label :password %><br />
        <%= f.password_field :password %>
    </div>
    <div>
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation %>
    </div>
    </div>
    <div class="modal-footer">
        <p>
            <div>
                <%= f.submit "Sign up", :class => 'btn btn-small btn-success' %>
            </div>
        </p>
        <p>
            <a href="#" class="btn btn-small" data-dismiss="modal">Close</a>
        </p>
</div>
<% end %>
</div>

在我的应用程序中，我确保需要twitter / bootstrap

#= require twitter/bootstrap

我确保将gem添加到我的gemfile

gem "twitter-bootstrap-rails"

当我点击其中任何一个＆＃34;注册＆＃34;或者＆＃34;登录＆＃34;页面只是刷新..我相信我已经添加了我的所有代码，对不起堆栈溢出了！

应用/控制器/ sessions_controller.rb

class SessionsController < ApplicationController

def new

end

def create
  user = User.from_omniauth(env["omniauth.auth"])
  session[:user_id] = user.id
  redirect_to root_path
end

def destroy
 session[:user_id] = nil
 redirect_to root_path
end

end

Answer 1

在应该触发模态

的按钮上执行此操作

<%= link_to "login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#your_modal_id', :class => "btn btn-primary", :method: 'get' %>

要使其正常工作，您必须覆盖设计sessions #new和registrations #new以响应ajax请求。你可以通过在这两个动作上引入一个respond_to块来做到这一点

respond_to do |format|
  format.js
end

然后在您的app/views/devise/registrations和app/views/devise/sessions创建new.js.erb文件中。您可以从模态中删除登录和注册表单，并使用javascript在这些new.js.erb文件中的模式内呈现表单。

您可以从模式中删除表单，并在modal-body中放置加载的gif。您可以将表单放在一个部分中，然后将其放在app/views/devise/sessions/_login_form.html.erb中。然后在app/views/devise/sessions/new.js.erb你做这样的事情。

$('#your_modal_id').remove-data
$('.modal-header').html ("<%= escape_javascript(render'/path/to/partial/with/header/content') %>");
$('.modal-body').html ("<%= escape_javascript(render '/path/to/partial')) %>");
$('.modal-footer').html ("<%= escape_javascript(render '/path/to/partial')) %>");

Twitter Bootstrap Modal没有弹出用户登录

1 个答案: