繁体   English   中英

Twitter Bootstrap模式不起作用

[英]Twitter Bootstrap Modals not working

我一直在尝试为我的设计和omniauth登录设置Twitter Bootstrap模式,但没有成功。 我也尝试过遵循一些教程,但仍然无法打开它们。

我的服务器日志中没有显示以下错误:

"Processing by Devise::SessionsController#new as JS"

我需要在application.coffee文件中使用twitter / bootstrap

#= require_self
#= require twitter/bootstrap
#= require ./util
#= require ./home and so on

在我的application.html.slim中,我在现有链接旁边添加了两个其他链接来登录/登录,以确保在删除旧链接之前它们可以正常工作

li
  = link_to "Login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#login_modal', :class => "btn btn-small", :method => 'get'

li
  = link_to "Sign Up Free", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#sign_up_modal', :class => "btn btn-small", :method => 'get'

然后我的sign_up_modal和login_modal几乎都相同。

<div class="modal hide fade in" id="sign_up_modal">
<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>

为了使如下所示的“登录”链接起作用,

li
  = link_to "Login", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#login_modal', :class => "btn btn-small", :method => 'get'

您将需要具有div id = login_modal (包含“登录”表单),例如:

<div class="modal hide fade in" id="login_modal">

要使如下所示的“免费注册”链接正常工作,

li
  = link_to "Sign Up Free", new_user_session_path, :remote => true, 'data-toggle' => 'modal', 'data-target' => '#sign_up_modal', :class => "btn btn-small", :method => 'get'

您将需要div id = sign_up_modalid = sign_up_modal “注册”表单),例如:

<div class="modal hide fade in" id="sign_up_modal">

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM