我正在示例 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 时,一切都可见。当我单击 LoginSign Up 按钮时,屏幕变为透明灰色,但我没有看到任何弹出窗口模式。我对 js 或 jquery 部分不太擅长,仍在学习中。有人可以告诉我如何解决这个问题吗?

请您参考如下方法:

我可以帮助你。

删除 hidein 从行

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

当您单击“登录”按钮时,您应该能够看到模式。

同时删除 <head> </head> 内的以下脚本标记因为您没有使用 id myModal 的模式.

<script type="text/javascript"> $(function () 
 
{ $("#myModal").modal({show:false }); </script> 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!