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

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

这是这个表单制作的按钮

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

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

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

谢谢

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 %> 呈现或者在容器中，无论您的布局用于主体的是什么，都添加这个

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

并从此部分删除:

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

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

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