我正在示例 Rails 应用程序的设计视图上实现 jquery。在我在生产代码上实现它之前,我想首先在示例应用程序上尝试它。
我有一个欢迎控制器和视图
route.rb如下
get 'welcome/index'
devise_for :users
root 'welcome#index'
而对于这两个部分的模板register
,并login
在下列文件中的谎言如下:
应用程序/视图/欢迎/_login_modal.html.erb
<div class="modal hide fade in" id="login">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign in</h2>
</div>
<div class="modal-body">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<%= f.submit "Sign in", :class => 'btn btn-small btn-success' %>
<% end %>
</div>
<div class="modal-footer">
<%= render "devise/shared/links" %>
</div>
</div>
我已经在application.html.erb文件本身中添加了我的 javascript 代码
<!DOCTYPE html>
<html>
<head>
<title>PopupDevise</title>
<%= link_to "Login", "#login", "data-toggle" => "modal", :class => 'btn btn-small' %>
<%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small btn-success' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>
</head>
<body>
<%= render "welcome/login_modal" %>
<%= render "welcome/sign_up_modal" %>
<%= yield %>
</body>
</html>
现在,当我运行时,rails s
一切都可见。当我点击Login
或Sign Up
按钮时,屏幕变为透明灰色,但我没有看到任何弹出窗口。我在 js 或 jquery 部分还没有那么好仍在学习。有人可以告诉我如何解决这个问题吗?
我可以帮你解决这个问题。
从行中删除hide
和in
<div class="modal hide fade in" id="login">
当您单击“登录”按钮时,您应该能够看到模态。
还要删除里面的波纹管脚本标签,<head> </head>
因为您没有使用带有 id 的模态myModal
。
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句