如何使用 Javascript 正确创建警报框？答案

【问题标题】：How to properly create an alert-box with Javascript?如何使用 Javascript 正确创建警报框？
【发布时间】：2014-11-22 00:21:34
【问题描述】：

我正在尝试使用 jQuery 即时打开 Foundation 警报框。当我尝试这样做时，关闭链接的行为有些不一致。如果页面上已经有一个警告框，则关闭链接有效。但是，如果我通过 JS 创建的框是页面上的第一个框，则关闭链接不起作用。我正在使用 Foundation 5.4.5。

我正在尝试做的简单演示：

HTML：

<a id="add">Add message</a>

JS：

$("#add").click(function(event) {
   $("body").append("<div class=\"alert-box\" data-alert>Dynamic alert<a class=\"close\">&times;</a></div>");
});

Codepen：http://codepen.io/dgross/pen/myyerB

但是，修改 HTML 以包含单独的警报使它们都可以工作：

<a id="add">Add message</a>
<div class="alert-box" data-alert>
...etc

Codepen：http://codepen.io/dgross/pen/qEEOqN

有没有我想念的官方方法？我也试过触发 'open.fndtn.alert-box' 事件，它似乎没有做任何事情。

【问题讨论】：

jQuery-UI 有一个“对话框”小部件，每次都能使用。
@DevlshOne 谢谢！我正试图让基金会警报首先发挥作用，因为我们正在站点的其他地方使用它们。但如果我不能，我会查看对话框小部件

标签： jquery zurb-foundation zurb-foundation-5

【解决方案1】：

我刚刚挖掘了源代码，发现了一个名为reflow的函数。将我的JS修改为以下解决了这个问题：

$("#add").click(function(event) {
   $("body").append("<div class=\"alert-box\" data-alert>Dynamic alert<a class=\"close\">&times;</a></div>");
   $(document).foundation('alert','reflow');
});

【讨论】：