Twitter Bootstrap Modal没有弹出用户登录

当用户登陆我们的主页时，我无法将twitter引导弹出模式与设计登录/注册结合使用。 我花了一些时间实现不同的方法，但仍然没有成功。 截至目前，当我点击与模态相关联的“登录”按钮时，网站刷新但没有模态。

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）几乎相同…

 
 
 x 
Sign Up
 
 
  resource_name, :url => registration_path(resource_name)) do |f| %>  

  true %>
 
 
  
 
 
  
 
 
 
 
  'btn btn-small btn-success' %> 
 
 
 Close 
 
   

在我的application.coffee中，我确保需要twitter / bootstrap

 #= require twitter/bootstrap 

我已经确保将gem添加到我的gemfile中

 gem "twitter-bootstrap-rails" 

当我点击“注册”或“登录”页面时，只需刷新..我相信我已经添加了所有代码，对不起新的堆栈溢出！

应用/控制器/ 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 new.js.erb app/views/devise/registrations和app/views/devise/sessions new.js.erb 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')) %>");