- 首页
- 前端开发
- Twitter Bootstrap Modal 不弹出用户登录
Twitter Bootstrap Modal 不弹出用户登录
[英] Twitter Bootstrap Modal not popping up for user login
本文介绍了Twitter Bootstrap Modal 不弹出用户登录的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当用户登陆我们的主页时，我无法将 Twitter 引导弹出模式与设计登录/注册结合起来.我花了一些时间实施不同的方法，但仍然没有成功.截至目前，当我点击与模态关联的登录"按钮时，网站会刷新但没有模态.
apps/views/layout/_header.html.slim(我的 application.erb 文件在其他部分调用)
li= link_to登录"，数据切换"=>模态"，数据目标"=>"#login_modal", :class =>btn btn-小"李= link_to免费注册"，数据切换"=>模态"，数据目标"=>"#sign_up_modal", :class =>btn btn-小"
我有两个几乎相同的部分(sign_up_modal、login_modal)...
<div class="modal-header"><button class="close" data-dismiss="modal">x</button><h2>注册</h2>
<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 =>真%></div><div><%= f.label :password %><br/><%= f.password_field :password %>
<div><%= f.label :password_confirmation %><br/><%= f.password_field :password_confirmation %>
<div class="modal-footer"><p><div><%= f.submit "注册", :class =>'btn btn-small btn-success'%>
</p><p><a href="#" class="btn btn-small" data-dismiss="modal">关闭</a></p>
<%结束%>
在我的 application.coffee 中，我确保需要 twitter/bootstrap
#= 需要 twitter/bootstrap
而且我已经确保将 gem 添加到我的 gemfile 中
gem "twitter-bootstrap-rails"
当我点击注册"或登录"时，页面会刷新..我相信我已经添加了我的所有代码，对不起，堆栈溢出的新手！
apps/controllers/sessions_controller.rb
class SessionsController <应用控制器定义新结尾定义创建用户 = User.from_omniauth(env["omniauth.auth"])session[:user_id] = user.id重定向到 root_path结尾销毁session[:user_id] = nil重定向到 root_path结尾结尾
解决方案
在应该触发模态的按钮上执行此操作
<%= link_to "login", new_user_session_path, :remote =>真，'数据切换' =>'模态', '数据目标' =>'#your_modal_id', :class =>"btn btn-primary", :method: 'get' %>
为此，您必须覆盖设计sessions #new 和registrations #new 以响应ajax 请求.你可以通过在这两个动作上引入一个 response_to 块来做到这一点
respond_to do |format|格式.js结尾
然后在您的 app/views/devise/registrations 和 app/views/devise/sessions 中创建 new.js.erb 文件.您可以从模态中删除登录和注册表单，并在这些 new.js.erb 文件中放置 javascript 以在模态中呈现表单.
您可以从模态中删除表单，并在 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'))%>");
I'm having trouble incorporating a twitter bootstrap pop-over modal with devise login/signup for when a user lands on our home page. I've spent some time implementing different methods but still no success. As of right now, when I click on the "login" button that is associated with the modal, the site refreshes but there is no modal.
apps/views/layout/_header.html.slim (my application.erb file calls in other partials)
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"
I have two partials (sign_up_modal, login_modal) that are almost identical...
<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>
In my application.coffee I've made sure to require twitter/bootstrap
#= require twitter/bootstrap
And I've made sure to add the gem to my gemfile
gem "twitter-bootstrap-rails"
When I click on either "sign up" or "login" the page just refreshes..I believe I've added all my code, sorry new to stack overflow!
apps/controllers/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
解决方案
Do this on the button that is supposed to trigger the modal
<%= link_to "login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#your_modal_id', :class => "btn btn-primary", :method: 'get' %>
For this to work you will have to overwrite devise sessions #new and registrations #new to respond to ajax requests. you can do this by introducing a respond_to block on both of these actions like this
respond_to do |format|
format.js
end
then in your app/views/devise/registrations and app/views/devise/sessions create new.js.erb files. You can remove the login and sign-up forms from the modal and put the javascript to render the forms inside the modals in these new.js.erb files.
You can remove the form from the modal and in modal-body you put a loading gif. You can instead put the form in a partial and place it in app/views/devise/sessions/_login_form.html.erb. Then in app/views/devise/sessions/new.js.erb you do something like this.
$('#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 不弹出用户登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
