Rails 4引导带3设计登录模式

Question

我正在尝试建立一个模式，所以当用户点击、登录或注册时，会出现一个弹出模式，允许他们通过devise或fb/twitter登录。

我正在使用的应用程序是使用Design.Omauth，coffeescript。我花了很多时间学习教程并修改我的代码上百万次，但我搞不懂。

在我的bootstrap.css.less文件中，我注意到它已经在导入引导/modals.less

# bootstrap.css.less
@import "bootstrap/modals.less"

布局application.html.slim

 li.profile-link-container
   = link_to "Login", new_user_session_path, data: { toggle: "modal", target: '#loginModal' }

我的用户控制器

#UsersController.rb
def create
if user_signed_in?
  render(:json => @user = current_user) and return
end

outcome = CreateUser.run(params[:user])

if outcome.success?
  sign_in(@user = outcome.result)
  render :json => @user
else
  render :json => {
    success: false,
    errors: outcome.errors.message
  }, status: 422
end
end

最后，我设计了新的观点

#app/view/devise/new.html.slim
.modal-header
  button.close aria-hidden="true" data-dismiss="modal" type="button"
  h3#myModalLabel Modal header
.container style="padding-top:80px"
  .panel.panel-default
    .panel-heading
      h2.panel-title
        | Sign up
    .panel-body
    .modal-body
      = form_for(resource, html:{role:"form"}, :as => resource_name, :url => registration_path(resource_name)) do |f| 
        = devise_error_messages!

        .form-group
          = f.label :full_name
          = f.text_field :full_name, :auto_focus => true, :placeholder=>"Enter your full name", :class => "form-control"
        .form-group
          = f.label :email
          = f.text_field :email, :placeholder=>"Enter your E-mail", :class => "form-control"
        .form-group
          = f.label :password
          = f.password_field :password, :placeholder => "Enter your password", :class => "form-control"
        .form-group
          = f.label :password_confirmation
          = f.password_field :password_confirmation, :placeholder => "Enter your password again", :class => "form-control"

        .form-group
          = f.submit 'Sign up', :class => "btn btn-success btn-large"
    .modal-footer
      button.btn aria-hidden="true" data-dismiss="modal"  Close
      button.btn.btn-primary Save changes    
    .panel-footer
      = render "devise/shared/links"

Answer 1

据我所知，您的触发器按钮在layout application.html.slim布局中，您的模式在#app/views/devise/new.html.slim中。除非您想使用ajax或其他什么，否则它们需要处于相同的视图中。当您单击触发器时，它将在已经加载的视图中寻找与按钮目标具有相同id的模式。

• 考虑让/devise/new.html.slim成为你的登陆页面。如果每个用户都必须登录才能进入应用程序中的任何位置，这难道没有意义吗？我认为，试图在另一个控制器中调用devise会为您带来一些问题。您必须使用ajax或其他什么工具来完成这一任务。
• 您需要在您的模式上使用modal-fade包装器div，并在触发器按钮(#loginModal)中给它指定的id。看起来你在模式中又少了几层。使用现场演示这里作为指南。
• 你的扳机“按钮”真的应该是一个按钮，我认为，以获得正确的引导行为。