单击外部关闭 Foundation 5 警告框

Question

Foundation 5 的警报文档 (http://foundation.zurb.com/docs/components/alert_boxes.html) 展示了如何创建一个带有 x 的警报框，以便在单击后关闭。

<div data-alert class="alert-box">
  <!-- Your content goes here -->
  <a href="#" class="close">&times;</a>
</div>

如何添加功能，一旦您在 whitespace/canvas 上的警告框外单击，它也会像显示模式对话框一样关闭 (http://foundation.zurb.com/docs/components/reveal.html?)

Answer 1

这是修复，由 Neps 评论引导。

  $(document).click(function() {
    $('.close').click();
  });

我使用的是文档而不是 body，它似乎有效。我将 class 更改为 class='close flash-data-alert'，并将点击调用更改为 $('.close.flash-data-alert').click();，因为我正在使用警报显示 Rails（我猜）即闪消息。

例子

<div>
...
  <% flash.each do |severity, message| %>
    <div data-alert class='alert-box <%= severity %>' role='dialog'>
      <%= message %>
      <a href='#' class='close flash-data-alert'>&times;</a>
    </div>
  <% end %>

  <%= yield %>
</div>

<script>
  $(document).click(function() {
    $('.close.flash-data-alert').click();
  });
</script>

单击外部关闭 Foundation 5 警告框

Close Foundation 5 alert box by clicking outside of it

ruby-on-rails

zurb-foundation