模态窗口出现在我的标题中而不是主体中

Question

以下是我的模态窗口的代码，它位于 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 -->

这是此表单生成的按钮

单击时会显示正确的模态窗口，该窗口显示为弹出窗口，背景中的屏幕变得更暗，一切正常。

  

问题：如何将此按钮放在导航栏的标题中？它位于 views / layouts / _header.html.erb中，（我的   layouts / application.erb文件调用此部分）

我试图将我的_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" %> 当我点击注册按钮时，表单出现在我的导航栏中

当它实际应该出现在主布局中时，按钮位于我的标题中，但表单必须出现在主体或布局中。 我该如何解决？

谢谢

Answer 1

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

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

在此导航栏之外，您使用<%= yield %>渲染您的身体，或在容器中使用您的布局用于主体的任何内容添加此

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

从此部分删除：

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

正如您在导航栏中添加的那样。

我希望这能完成这项工作。基本上你正在做的是在布局本身但在导航栏之外编写对话框代码。在你看来的身体。不在标题中。