Twitter Bootstrap Modals不起作用

时间:2014-04-29 16:42:01

标签: javascript ruby-on-rails ruby twitter-bootstrap modal-dialog

我一直试图为我的设计和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>

1 个答案:

答案 0 :(得分:0)

对于&#34;登录&#34;链接如下所示工作,

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

您需要id = login_modal div(附上登录表单) 例如:

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

对于&#34;免费注册&#34;链接如下所示工作,

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'

您需要id = sign_up_modal div(附上注册表单) 例如:

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