Modal window appears in my header instead of the main body - css

Question

Here is the code i have for my modal window it is located in views/devise/registration/_newfile.html.erb folder
<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">×</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 -->
This is the button that this form makes
When clicked it gives the proper modal window,which appears as a popup,and the screen in the background gets darker as it should,everything works fine.
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)
I tried to put in my _header partial this code
<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>
As you see i used <%= render "users/registrations/newfile" %>
and the form appeared literally in my navbar,when i click on sign up button
When it actually should appear in the main layout,so the button is in my header but the form must appear in the main body or layout.
how can i fix it?
thank you

Answer 1

I think you need to show the signup dialog anywhere in the site where the SignUp button exists in the navigation bar. So for this make these changes in the code:
<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>
And outside this nav where you body is rendered using <%= yield %> or in the container whatever your layout is using for the main body in that add this
<%= render "users/registrations/newfile" %>
And from this partial remove:
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
as you have added this in the nav bar.
I hope this will do the job. Basically what you are doing is writing the dialog code in the layout itself but outside the nav bar. In the body of you view. Not in header.