1

そのため、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>
4

1 に答える 1

0

私はいつもjQueryuiモーダルフォームを使用しています

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>
于 2013-08-05T18:41:31.450 に答える