我正在示例 Rails 应用程序的设计 View 上实现 jquery。在我在生产代码上实现它之前,我想首先在示例应用程序上尝试一下。
我有一个欢迎 Controller 和 View
routes.rb如下
get 'welcome/index'
devise_for :users
root 'welcome#index'
注册和登录的部分模板位于以下文件中,如下所示:
app/views/welcome/_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
时,一切都可见。当我单击 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>