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的回答并对其进行了改进，添加了一个可选的type和closeDelay，以便您可以添加类型为{{1}的警报这将在5秒后自动关闭：

danger

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

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

Answer 5

我认为你是对的。在警报的“关闭”事件中，整个Dom元素被摧毁，我们点击了它们。所以我们无法检查该ID的可见性属性。

所以我的建议是'不要使用'close'类或关闭bootstrap-alerts.js的事件。只需到那里看看课程，并尝试使用传统的隐藏展示或一些jquery技巧来完成我们的任务。

Answer 6

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

变化：

.remove()

要：

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

Answer 7

您可以考虑使用Toastr库（John https://github.com/CodeSeven/toastr的实现）。 Toastr为您提供本机DOM事件触发器所需的警报功能，或者您可以在PageLoad上显示通知。值得研究。

动态创建Bootstrap CSS警报消息

7 个答案: