4

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

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

4

3 回答 3

9

Twitter 有一个 div 可以position: fixed;为他们解决问题，然后他们有一个 div 和 divmessage里面的alert-messages类。

.alert-messages {
  position: fixed;
  top: 47px;
  left: 0;
  right: 0;
  z-index: 7000;
}
于 2013-04-15T02:16:14.287 回答
4

尝试使用模式： 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…&lt;/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>
于 2013-04-15T02:16:12.337 回答
1

实际上找到了最好的方法来做到这一点。

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

然后，在 application.html.haml 文件（我使用的，可能是 .html.erb）的底部添加将显示您的 flash 的代码片段。我的看起来像（在 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;}

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

于 2013-05-03T19:52:32.760 回答