模态 window 出现在我的 header 而不是主要 body

Question

这是我的模式 window 的代码，它位于 views/devise/registration/_newfile.html.erb 文件夹

<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>

<div id="normalModal" class="modal fade" data-toggle="modal">
  <div class="modal-dialog">
    <div class="modal-content">      
      <div class="panel panel-default">
        <div class="panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h1 class="modal-title">Signup to sharebox</h1>
        </div>
        <div class="modal-body">
          <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
          <div class="form-group">
            <%= f.label :email %><br />
            <%= f.email_field :email, autofocus: true, class: "form-control" %>
          </div>
          <% end %>
          <%= render "devise/shared/links" %>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是这个表格做的按钮

单击后会显示正确的模式 window，它显示为弹出窗口，背景屏幕变暗，一切正常。

Question: How to put this button in my navigation bar,in the header? which is located in views/layouts/_header.html.erb,(my layouts/application.erb file calls this partial)

我试着把我的 _header 部分放入这段代码

    <nav>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "log in",   user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline"  %></li>
            <li><%= render "users/registrations/newfile" %></li>
          <% end %>
        </ul>
      </div>
    </nav>

如你所见，我使用了 <%= render "users/registrations/newfile" %> 当我点击注册按钮时，表格就出现在我的导航栏中

当它实际上应该出现在主布局中时，按钮在我的 header 中，但表单必须出现在主 body 或布局中。我该如何解决？

谢谢

Answer 1

我认为您需要在站点导航栏中存在注册按钮的任何位置显示注册对话框。因此，为此对代码进行以下更改：

<nav>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "log in",   user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline"  %></li>
        <li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
      <% end %>
    </ul>
  </div>
</nav>

在这个导航之外，你 body 是使用 <%= yield %> 渲染的，或者在容器中，无论你的布局用于主要 body，添加这个

<%= render "users/registrations/newfile" %>

并从此部分删除：

<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>

因为您已将其添加到导航栏中。

我希望这能完成工作。基本上你正在做的是在布局本身但在导航栏之外编写对话框代码。在你的 body 视图中。不在 header.

模态 window 出现在我的 header 而不是主要 body

Modal window appears in my header instead of the main body

css

ruby-on-rails

twitter-bootstrap

ruby-on-rails-4

bootstrap-modal