Twitter Bootstrap: Want the alerts not moving the rest of the page down

Question

So say in my user sign up (using Devise), I've got the error messages at the very top of the sign up page.

<% if @user.errors.any? %>
  <div class="alert alert-error">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <%= devise_error_messages! %>
  </div>
<% end %>

<div><%= f.label :email %><br />
<%= f.email_field :email %></div>

<div><%= f.submit "Sign up" %></div>

However, when I put nothing in, attempt to sign up and get the error, the rest of the page will move down. I'm trying to get the error to just appear above the page, and then have the form so I can close it and have nothing there (none of the page moves when I close).

For instance at Twitter.com, attempting to sign in with no information, Twitter will ask if you're human in a black popup box that doesn't move the page down.

I'm at a loss on how to get bootstrap to do this.

What I'm speaking of, is this: http://i.imgur.com/UUYLkax.jpg

Answer 1

Twitter has a div with position: fixed; which does the trick for them, and then they have a div with the message class inside the div with the alert-messages class.

.alert-messages {
  position: fixed;
  top: 47px;
  left: 0;
  right: 0;
  z-index: 7000;
}

Answer 2

Try using a modal: http://getbootstrap.com/javascript/#modals

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>