动态创建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警报？

- tibbe

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();

- Sanjay

---

顺便提一句，自 jQuery 1.9起，live已经废弃，建议使用on代替。 - Nishant

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>

在出现多个警报的情况下，此版本将导致多个警报堆积，需要最终用户逐个解除。根据您期望的警报数量以及用户查看每个警报的重要性，您可能希望修改此设置以删除旧警报。

另外，通过稍微重构，您可以扩展此设置以创建警告、信息和成功警报，而不仅仅是此错误警报。

- Eamonn O'Brien-Strain

---

更好的方法是在 $(document).ready(function() 中使用 .hide(); 隐藏整个警报文本。当需要警报时，可以显示该块，并动态插入一个带有信息文本的单个 <div> 块。 - Joel G Mathew

我认为这不会起作用，因为Bootstrap代码将在用户关闭警告时从DOM中删除它。 - Eamonn O'Brien-Strain

然而，将视图与控制器分离是您建议的优点。一种方法是按照您的建议将警报存储在HTML中，然后使用JQuery克隆它并显示为新块。如果需要，可以修改每个警报的文本。您甚至可以使用JavaScript模板库，但只有在出于其他原因而使用时才值得这样做。 - Eamonn O'Brien-Strain

Answer 3

我参考了Eamonn的答案并进行了改进，增加了可选的type和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);     
}

- isapir

---

很好的发现，@SaiyajinGohan。如果你觉得这个答案有用，请点赞。谢谢。 - isapir

这个很不错，但把它做成jQuery插件会更好。你查询了#alerts-container两次，我建议缓存一下那个引用。此外，你可以使用jQuery的内置函数（例如 attr("type", "button")和addClass("alert")）来更清晰、更易于维护地构建HTML。我已经点赞了，但是乞求投票有点不太好。 - Sean Kendle

Answer 4

Best way that i know:

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 5

你可以考虑使用 Toastr 库（由 John Papa 开发，https://github.com/CodeSeven/toastr）。Toastr 可以通过本地 DOM 事件触发提供所需的警报功能，或者在页面加载时显示通知。值得探究。

- Steven Woolston

Answer 6

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

所以我的建议是“不要使用bootstrap-alerts.js的'close'类或关闭事件。 只需获取其类以进行查看，并尝试使用传统的hide-show或一些jQuery技巧来使我们的任务正常工作。

- Anuja P

---

我猜另一个选项是每次想要显示警报时将HTML插入DOM中。 - tibbe

是的，当我们每次需要显示不同的警报消息时，这可能是更好的选择。 - Anuja P

Answer 7

更改removeElement()函数。在bootstrap-alert.js的第59行：

更改为：

.remove()

To:

.hide().css('opacity', 1);

- Joao Leme