Question

所以说在我的用户注册中（使用Devise），我在注册页面的顶部收到了错误消息。

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

然而，当我什么都没有，尝试注册并得到错误时，页面的其余部分将向下移动。我试图让错误出现在页面上方，然后得到表单，以便我可以关闭它并且没有任何内容（当我关闭时没有页面移动）。

例如在Twitter.com上，试图在没有信息的情况下登录，Twitter会询问你是否是一个不会移动页面的黑色弹出框中的人。

我对如何获得引导程序感到茫然。

我在说什么，是：http://i.imgur.com/UUYLkax.jpg

Answer 1

Twitter有一个position: fixed;的div，可以为他们提供技巧，然后他们在div中使用message类，并使用alert-messages类。

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

Answer 2

尝试使用模态：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>

Answer 3

实际上找到了最好的方法。

首先，在Nijikokun's bootstrap-notify下载文件并将它们放入项目中。

然后，添加将在您的application.html.haml文件底部显示您的flash的代码片段（我使用的，也许是.html.erb）。我看起来像（在HAML中）：

- flash.each do |key, value|
  .notifications.top-center
    %div{class: "alert alert-#{key} in fade"}
      %button.close{"data-dismiss" => "alert", type: "button"} &times;
      -if value.is_a?(String)
        = value
      -else
        -if value.nil?
          = devise_error_messages
        -else
          - value.each do |msg|
            %li
              = msg

基本上，这将做什么，是通过它并检查是否有除了常规字符串之外的任何东西。如果它只是一个字符串（意思是，它不是一个字符串数组），请发布它。然后，如果它不是一个字符串，你需要检查它是否为nil，如果是，那将是设计错误消息（如果你有设计）。如果您没有设计或不想要设计错误消息，只需跳过- if value.nil?部分并转到每个数组的值，并将其发布到- value.each do |msg|及以后的所有内容中。

现在，如果您希望它出现在顶层中心（就像我目前所做的那样），您需要将它添加到bootstrap-notify的CSS文件中：.notifications.top-center{top:40px;left:0;width:100%;}.notifications.top-center>div{margin:5px auto;width:20%;text-align:center;}

之后，它应该像上面我想要的那样工作！

Twitter Bootstrap：希望警报不会移动页面的其余部分

3 个答案: