带基础的动态警报框答案

【问题标题】：Dynamic Alert Box with Foundation带基础的动态警报框
【发布时间】：2014-02-10 15:37:09
【问题描述】：

我应该如何将新的警报框动态添加到具有基础的页面？看起来我必须为该框插入 html 标记，然后重新初始化整个页面的基础......这不可能，是吗？

是否有一些简单的方法可以动态添加警报框？

我希望有一个 API，例如：$("#myElement").foundation('alert', "foo 123");

例子：

$.post("/some/url", {some:'data'})
    .fail(function(){
        $("#myElement").foundation('alert', 'Process failed!');
    });

【问题讨论】：

哪个事件会触发您的警报框出现？你能举一个更现实的例子/场景吗？
我已经编辑了这个问题，包括一个具体的例子来说明我希望它如何工作

标签： javascript jquery zurb-foundation

【解决方案1】：

没有 API，但你可以这样做：

$.post("/some/url", {some:'data'})
.fail(function(){
    var alertBox = '<div data-alert class="alert-box"> Sorry, the request failed.  <a href="#" class="close">&times;</a></div>';
    $("#errorArea").append(alertBox).foundation();
});

【讨论】：

【解决方案2】：

我找到了一种更好的方法来做到这一点，类似于@Ben Polinsky 所做的。唯一的区别是它只重新初始化“alert”模块而不是一切。

// Create the HTML
var $message = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>');
// Fill it
$message.addClass(severity).children("span").text(message);
// Add the div and re-initialize foundation-alert for its parent
$("#errorArea").prepend($message).foundation(
    "alert", // libraries -- if it's undefined or "reflow" it will loop on all libs
    undefined, // method -- if it's undefined it will call init
    {speed: "slow", animation: "slideUp", callback: function() {}} // options -- optional, to customize the alert box
);

【讨论】：

【解决方案3】：

jadkik94 给出了一个很好的例子。基于它，我有一个更完整/更易于理解的解决方案：

var message = "You are doomed";
var type = "alert"

showMessage(message, type);

function showMessage(message, type) {
    var alertMarkup = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>');
    alertMarkup.addClass(type);
    alertMarkup.children("span").text(message);
    $("#foundation-alerts").prepend(alertMarkup).foundation(
        "alert",
        undefined
    );
}

【讨论】：