Javascript 动态创建引导CSS警报消息

我正在尝试使用用于引导CSS的jQuery插件动态创建警报消息。我想创建和销毁某些事件的警报（例如AJAX成功/错误）。下面是我的代码的一个不起作用的片段：

var alertVisible = false;
function fetchData() {
    function onDataReceived(stats) {
        if (alertVisible) {
            $(".alert-message").alert("close");
        }
        alertVisible = false;
        // Do stuff with data...
    }

    function onError() {
        $(".alert-message").alert();
        alertVisible = true;
    }

    $.ajax({
        dataType: 'json',
        success: onDataReceived,
        error: onError,
        cache: false
    });
};

下面是相应的HTML：

<div class="row">
  <div class="alert-message error fade in hide span16" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>Lost connection to server.</p>
  </div>
</div>

与服务器的连接中断

---

我的第一个问题是，默认情况下会显示警报。我可以通过使用

hide

类来解决这个问题。但是，如果您关闭一个警报（通过单击close按钮），那么创建新的断言将不再有效（我猜DOM元素已经消失）。您应该如何使用引导警报？

我认为您是正确的。在警报的“关闭”事件中，我们单击的整个Dom元素将被销毁。因此，我们无法检查该ID的可见性属性

所以我的建议是‘不要使用bootstrap-alerts.js的‘close’类或close事件。

---

只需在这些类中进行查找，并尝试使用传统的隐藏显示或一些jquery技巧来完成任务。

这个答案指的是Bootstrap 2

关闭警报时，它将从DOM中删除

如果要在以后重新显示警报，请确保不要将

data dismission=“alert”

置于关闭按钮中，如下所示：

<div class="alert fade in" id="login-error" style="display:none;">
    <button type="button" class="close">×</button>
    Your error message goes here...
</div>

如果希望工具提示重新出现，只需显示它即可

$('#login-error').show();

更改removeElement（）函数。bootstrap-alert.js中的第59行：

更改：

.remove()

致：

我知道的最好的方法是：

HTML:

---

现在，我们可以使用showAlert（）显示通知，并使用closeAlert（）隐藏通知。

您只需动态添加通知的DOM元素即可

Javascript:

function addAlert(message) {
    $('#alerts').append(
        '<div class="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
            '&times;</button>' + message + '</div>');
}

function onError() {
    addAlert('Lost connection to server.');
}

函数addAlert（消息）{
$（“#警报”）。追加(
'' +
'' +
“×；”+消息+”；
}
函数onError（）{
addAlert（'与服务器的连接断开'）；
}

HTML:

如果存在多个警报，此版本将导致多个警报堆积，最终用户必须单独解除这些警报。根据您预期的警报数量以及用户查看每个警报的重要性，您可能需要修改此选项以删除旧警报

---

此外，只要稍加重构，您就可以扩展到创建警告、信息和成功警报，除了这个错误警报。

< P>您可以考虑ToSAST库（John Papa）的实现。Toastr为您提供了本机DOM事件触发器所需的警报功能，或者您可以在PageLoad上显示通知。这是值得研究的。

我接受了埃蒙恩的答案，并对其进行了改进，添加了可选的

类型

和

关闭延迟

，以便您可以添加一个类型为

危险

的警报，该警报将在5秒钟后自动关闭，如下所示：

showAlert("Warning message", "danger", 5000);

要实现这一点，请添加以下JavaScript函数：

function showAlert(message, type, closeDelay) {

    var $cont = $("#alerts-container");

    if ($cont.length == 0) {
        // alerts-container does not exist, create it
        $cont = $('<div id="alerts-container">')
            .css({
                 position: "fixed"
                ,width: "50%"
                ,left: "25%"
                ,top: "10%"
            })
            .appendTo($("body"));
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div>')
        .addClass("fade in show alert alert-" + type)
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $cont.prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

功能showAlert（消息、类型、关闭延迟）{
var$cont=$（“#警报容器”）；
如果（$cont.length==0）{
//警报容器不存在，请创建它
$cont=$（''）
.css({
位置：“固定”
，宽度：“50%”
，左：“25%”
，排名前：“10%。”
})
。附件（$（“正文”）；
}
//默认为警报信息；其他选项包括成功、警告、危险
类型=类型| |“信息”；
//创建警报div
变量警报=$（''）
.addClass（“淡入显示警报-”+类型）
.附加(
$('')
.append（“×；”）
)
.附加（信息）；
//将警报div添加到警报容器的顶部，使用append（）添加到底部
$cont.prepend（警报）；
//如果传递了closeDelay-设置超时以关闭警报
如果（关闭延迟）
setTimeout（函数（）{alert.alert（“close”）}，closeDelay）；
}

我想另一个选择是每次我想显示警报时都在DOM中插入HTML。是的，当我们每次都要显示不同的警报消息时，这是一个更好的选择。顺便说一句，

live

已经从jQuery 1.9+中消失了；在上使用

，而不是一个更好的方法是通过
.hide（）隐藏html中的整个警报文本位于
$（文档）.ready（函数（）
。当需要警报时，可以显示块，并动态插入信息文本的单个块。我认为这不起作用，因为引导代码将在用户关闭时从DOM中删除警报。不过，最好将视图与控制器分开，这是您建议的一个优点。一种方法是：将警报按照您的建议存储在HTML中，然后复制它（使用JQuery克隆）并将其显示为一个新块。如果需要，您可以修改每个警报的文本。您甚至可以使用JavaScript模板库，但可能只有在出于其他原因使用JavaScript模板库时才值得这么做。很好，请点击@SaiyajinGohan。如果您发现答案有用，请向上投票。谢谢。这很好，但值得打赌作为一个jQuery插件。你要查询两次
#警报容器
，我会缓存该引用。此外，你可以使用jQuery的内置函数，如
attr（“type”，“button”）
和
addClass（“alert”）更清晰、更易于维护地构建HTML
，等等。投票率上升，但乞讨选票有点不受欢迎。
$('.alert .close').live("click", function(e) {
    $(this).parent().hide();
});

function showAlert() {
    $(".alert").addClass("in");
    $("#cert-error").show();
}

function closeAlert() {    
    $("#cert-error").hide();
}

function addAlert(message) {
    $('#alerts').append(
        '<div class="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
            '&times;</button>' + message + '</div>');
}

function onError() {
    addAlert('Lost connection to server.');
}

<div id="alerts"></div>

showAlert("Warning message", "danger", 5000);

function showAlert(message, type, closeDelay) {

    var $cont = $("#alerts-container");

    if ($cont.length == 0) {
        // alerts-container does not exist, create it
        $cont = $('<div id="alerts-container">')
            .css({
                 position: "fixed"
                ,width: "50%"
                ,left: "25%"
                ,top: "10%"
            })
            .appendTo($("body"));
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div>')
        .addClass("fade in show alert alert-" + type)
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $cont.prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}