Question

因此，如果您访问www.leapfm.com并单击注册或登录，则会将您重新定向到新页面。但是，我希望窗口弹出而不是为了更好的用户体验。

我已尝试使用SimpleModal，但似乎无法使其正常运行。

我已将simplemodal.js文件放在我的assets / javascript中。

然后随后创建了一个名为popout.js的新文件，其中包含我要弹出的类（注册，登录表单）

$(".form-1").modal();

但它似乎没有起作用。我该怎么做才能让它工作？/让登录和注册窗口成为弹出窗口。

更多代码：

.form-1 {
    position: fixed;
      top: 50%;
    margin: 0 auto;
    width: 300px;
    padding: 10px;
    position: relative; /* For the submit button positioning */

    /* Styles */
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.3),
        0 3px 7px rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}

登录

<div class="form-1">
<h2>Sign in</h2>

<p class="notice"><%= notice %></p>

<%= content_tag(:div, flash[:error], :id => "flash_error") if flash[:error] %>
<%= content_tag(:div, flash[:alert], :id => "flash_alert") if flash[:alert] %>

<br />

<%= 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 -%>

  <div><%= f.submit "Sign in" %></div>
<% end %>

<%= render "devise/shared/links" %>
</div>

Answer 1

我总是使用jQueryui Modal Form

在你的app / assets / javascripts中复制jquery-ui。

很容易集成到rails应用程序中。

制作你的link_to，将表单部分打开为远程true。它弹出你的手指。

实施例，

<%= link_to "Register",new_user_path,{:remote => :true} %>

在 app / views / new.js.erb

中

$("#new-form").dialog({
  autoOpen: true,
  width: 650,
  height: 800,
  modal: true,
  draggable:true,
  resizable:false,
  buttons: [
       {
            text: "CLOSE",
            className: 'close-button-class',
            click: function() {
                $(this).dialog("close");
                location.reload();
            }
        }
    ],
  open: function() {
    $("#new-form").html("<%= escape_javascript(render('form')) %>");
    }
});

应用/视图/用户/ _form.html.erb

<%= 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 -%> <div><%= f.submit "Sign in" %></div> <% end %> <%= render "devise/shared/links" %> </div>

Simplemodal弹出窗口？

1 个答案: