javascript - 简单模式弹出窗口？

Question

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

我尝试过使用SimpleModal为此，但似乎无法让它发挥作用。

我已将 simplemodal.js 文件放入我的 asset/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

将 jquery-ui 复制到您的 app/assets/javascripts 中。

它非常容易集成到您的 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')) %>");
    }
});

app/views/user/_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>