dynamic创buildBootstrap CSS警报消息
我试图dynamic创build使用引导CSS的jQuery插件警报消息。 我想创build和销毁某些事件的警报（例如，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="#">×</a> <p>Lost connection to server.</p> </div> </div>
我的第一个问题是，警报是默认显示的。 我可以通过使用hide类来解决这个问题。 但是，如果closures了一个警报（通过点击closuresbutton），然后创build新的断言不再有效（我猜DOM元素已经消失了）。 你应该如何使用Bootstrap警报？
这个答案是指Bootstrap 2。
当警报closures时，它将从DOM中删除。
如果您希望稍后再次出现警报，请确保不要在closuresbutton中显示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>
然后，绑定closuresbutton，以便在按下时隐藏警报：
$('.alert .close').on('click', function(e) { $(this).parent().hide(); });
当你想让工具提示重新出现时，只需显示它即可。
$('#login-error').show();
您可以dynamic添加警报的DOM元素。
使用Javascript：
function addAlert(message) { $('#alerts').append( '<div class="alert">' + '<button type="button" class="close" data-dismiss="alert">' + '×</button>' + message + '</div>'); } function onError() { addAlert('Lost connection to server.'); }
HTML：
<div id="alerts"></div>
在多个警报的情况下，该版本将导致多个警报堆积，必须由最终用户单独解散。 取决于您期望的警报数量以及用户查看每个警报的重要性，您可能需要对其进行修改以删除旧警报。
此外，通过一些重构，除了这个错误提示之外，还可以扩展它来创build警告，信息和成功提醒。
我知道的最好的方法是：
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（）隐藏它们。
我拿了Eamonn的回答，并对其进行了一些改进，添加了一个可选type和closeDealy ，以便您可以添加一个dangertypes的警报，例如5秒后自动closures：
showAlert("Warning message", "danger", 5000);
为了达到这个目的，添加下面的Javascript函数：
function showAlert(message, type, closeDelay) { if ($("#alerts-container").length == 0) { // alerts-container does not exist, create it $("body") .append( $('<div id="alerts-container" style="position: fixed; width: 50%; left: 25%; top: 10%;">') ); } // default to alert-info; other options include success, warning, danger type = type || "info"; // create the alert div var alert = $('<div class="alert alert-' + type + ' fade in">') .append( $('<button type="button" class="close" data-dismiss="alert">') .append("×") ) .append(message); // add the alert div to top of alerts-container, use append() to add to bottom $("#alerts-container").prepend(alert); // if closeDelay was passed - set a timeout to close the alert if (closeDelay) window.setTimeout(function() { alert.alert("close") }, closeDelay); }
我想你是对的。 在“closures”事件的警报整个Dom元素被摧毁，我们已经点击。 所以我们无法检查该ID的可见性属性。
所以我的build议是'不要使用'closures'类或closures事件的bootstrap-alerts.js。 只要到那里上课，尝试使用传统的隐藏表演或一些jquery技巧来完成我们的任务。
更改removeElement（）函数。 来自bootstrap-alert.js的第59行：
更改：
.remove()
至：
.hide().css('opacity', 1);
你可以考虑Toastr库的实现（John Papa的https://github.com/CodeSeven/toastr ）。 Toastr为您提供了使用本地DOM事件触发器所需的警报function，或者您可以在PageLoad上显示通知。 这是值得调查的。
