Question

基金会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>

如何添加在空白/画布上单击警告框外部的功能，它也会关闭类似于显示模式对话框（http://foundation.zurb.com/docs/components/reveal.html？）

Answer 1

以下是修正案，由Neps发表评论。

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

我使用的是文档而不是body，它似乎有效。我将课程更改为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警告框

1 个答案: