动态创建Bootstrap CSS警报消息

Question

我正在尝试使用Bootstrap 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类来解决这个问题.但是,如果您关闭警报(通过单击关闭按钮),则创建新断言不再有效(我猜DOM元素已消失).你是如何使用Bootstrap警报的？

Answer 1

这个答案指的是Bootstrap 2.

关闭警报后,它将从DOM中删除.

如果您想要稍后再次出现警报,请确保不要data-dismiss="alert"按如下方式放入关闭按钮:

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

然后,绑定关闭按钮,以便在按下时隐藏警报:

$('.alert .close').on('click', function(e) {
    $(this).parent().hide();
});

如果要重新显示工具提示,只需显示它即可.

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

Answer 2

您可以动态添加警报的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.');
}

HTML:

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

在多个警报的情况下,此版本将导致多个警报堆积,必须由最终用户单独解除.根据您预期的警报数量以及用户查看每个警报的重要程度,您可能需要修改此警报以删除旧警报.

此外,通过一些重构,除了此错误警报之外,您还可以对此进行扩展以创建警告,信息和成功警报.

Answer 3

我知道的最佳方式:

HTML:

<div class="alert alert-block alert-error fade in" id="cert-error" style="display:none;">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <h4 class="alert-heading">???? ???? ?? ????????!</h4>
    <p>???????????? ??? ?????! ???????? ???? ????: *.cer, *.crt</p>
    <p>
        <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
    </p>
</div>

JS:

$('.alert .close').live("click", function(e) {
    $(this).parent().hide();
});

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

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

现在我们可以使用showAlert()显示通知,并使用closeAlert()隐藏它们.

Answer 4

我接受了 Eamonn 的回答并对其进行了一些改进，添加了一个可选的typeand closeDelay，以便您可以添加一个类型的警报，该警报danger将在 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);     
}