61

我正在为我的项目使用 Bootstrap 2.0，我想在我的页面中动态添加 Bootstrap 警报框 ( http://twitter.github.com/bootstrap/javascript.html#alerts )。我想做类似的事情：

bootstrap-alert.warning("Invalid Credentials");
4

10 回答 10

87

试试这个（请参阅 jsfiddle 中此代码的工作示例：http: //jsfiddle.net/periklis/7ATLS/1/）

<input type = "button" id = "clickme" value="Click me!"/>
<div id = "alert_placeholder"></div>
<script>
bootstrap_alert = function() {}
bootstrap_alert.warning = function(message) {
            $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
        }

$('#clickme').on('click', function() {
            bootstrap_alert.warning('Your text goes here');
});
</script>​

编辑：现在有一些库可以简化和简化此过程，例如bootbox.js

于 2012-04-14T20:00:22.737 回答
42 
/**
  Bootstrap Alerts -
  Function Name - showalert()
  Inputs - message,alerttype
  Example - showalert("Invalid Login","alert-error")
  Types of alerts -- "alert-error","alert-success","alert-info","alert-warning"
  Required - You only need to add a alert_placeholder div in your html page wherever you want to display these alerts "<div id="alert_placeholder"></div>"
  Written On - 14-Jun-2013
**/

  function showalert(message,alerttype) {

    $('#alert_placeholder').append('<div id="alertdiv" class="alert ' +  alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')

    setTimeout(function() { // this will automatically close the alert and remove this if the users doesnt close it in 5 secs


      $("#alertdiv").remove();

    }, 5000);
  }
于 2013-06-14T22:36:42.123 回答
9

您还可以像这样创建 HTML 警报模板：

<div class="alert alert-info" id="alert_template" style="display: none;">
    <button type="button" class="close">×</button>
</div>

所以你可以在这里用 JavaScript 做这个：

$("#alert_template button").after('<span>Some text</span>');
$('#alert_template').fadeIn('slow');

在我看来，这更清洁、更快。此外，在调用fadeIn().

为保证此警报模板也适用于多个调用（因此它不会将新消息添加到旧消息中），请在此处将其添加到您的 JavaScript：

$('#alert_template .close').click(function(e) {
    $("#alert_template span").remove();
});

因此，每次您通过 x 按钮关闭警报时，此调用都会删除 span 元素。

于 2013-05-23T12:31:00.480 回答
7

我创建了这个非常简单和基本的插件：

(function($){
    $.fn.extend({
        bs_alert: function(message, title){
            var cls='alert-danger';
            var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
            if(typeof title!=='undefined' &&  title!==''){
                html+='<h4>'+title+'</h4>';
            }
            html+='<span>'+message+'</span></div>';
            $(this).html(html);
        },
        bs_warning: function(message, title){
            var cls='alert-warning';
            var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
            if(typeof title!=='undefined' &&  title!==''){
                html+='<h4>'+title+'</h4>';
            }
            html+='<span>'+message+'</span></div>';
            $(this).html(html);
        },
        bs_info: function(message, title){
            var cls='alert-info';
            var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
            if(typeof title!=='undefined' &&  title!==''){
                html+='<h4>'+title+'</h4>';
            }
            html+='<span>'+message+'</span></div>';
            $(this).html(html);
        }
    });
})(jQuery);

用法是

<div id="error_container"></div>
<script>
$('#error_container').bs_alert('YOUR ERROR MESSAGE HERE !!', 'title');
</script>

第一个插件，它可以很容易地变得更好

于 2014-05-24T01:30:34.173 回答
4

今天发现了这个，做了一些调整并结合了其他答案的功能，同时将其更新到 bootstrap 3.x。注意：这个答案需要 jQuery。

在 html 中：

<div id="form_errors" class="alert alert-danger fade in" style="display:none">

在 JS 中：

<script>
//http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript
function bootstrap_alert(elem, message, timeout) {
  $(elem).show().html('<div class="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>');

  if (timeout || timeout === 0) {
    setTimeout(function() { 
      $(elem).alert('close');
    }, timeout);    
  }
};
</script>​

然后你可以调用它：

bootstrap_alert('#form_errors', 'This message will fade out in 1 second', 1000)
bootstrap_alert('#form_errors', 'User must dismiss this message manually')
于 2014-01-01T14:28:39.293 回答
3

回顾一下：

$(document).ready(function() {

    $('button').on( "click", function() {

      showAlert( "OK", "alert-success" );

    } );

});

function showAlert( message, alerttype ) {

    $('#alert_placeholder').append( $('#alert_placeholder').append(
      '<div id="alertdiv" class="alert alert-dismissible fade in ' +  alerttype + '">' +
          '<a class="close" data-dismiss="alert" aria-label="close" >×</a>' +
          '<span>' + message + '</span>' + 
      '</div>' )
    );

    // close it in 3 secs
    setTimeout( function() {
        $("#alertdiv").remove();
    }, 3000 );

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<button onClick="" >Show Alert</button>
      
<div id="alert_placeholder" class="container" ></div>

密码笔

于 2019-09-01T10:09:16.087 回答
2

FWIW 我创建了一个可以在运行时使用的 JavaScript 类。
它在GitHub 上结束了，在这里。

那里有一个自述文件，其中有更深入的解释，但我将在下面做一个简单的示例：

var ba = new BootstrapAlert();
ba.addP("Some content here");
$("body").append(ba.render());

上面将创建一个简单的主要警报，其中包含一个段落元素，其中包含文本“这里有一些内容”。

还有一些可以在初始化时设置的选项。
根据您的要求，您可以：

var ba = new BootstrapAlert({
    dismissible: true,
    background: 'warning'
});
ba.addP("Invalid Credentials");
$("body").append(ba.render());

该render方法将返回一个 HTML 元素，然后可以将其插入到 DOM 中。在这种情况下，我们将它附加到 body 标签的底部。

这是一个正在进行的库，但它仍然处于非常好的工作状态。

于 2018-02-02T12:14:01.947 回答
1

我最终使用了带有样式修改 的 toastr ( https://github.com/CodeSeven/toastr )使 toastr 警报看起来像引导警报

于 2014-07-15T19:42:44.023 回答
1 
function bootstrap_alert() {
        create = function (message, color) {
            $('#alert_placeholder')
                .html('<div class="alert alert-' + color
                    + '" role="alert"><a class="close" data-dismiss="alert">×</a><span>' + message
                    + '</span></div>');
        };
        warning = function (message) {
            create(message, "warning");
        };
        info = function (message) {
            create(message, "info");
        };
        light = function (message) {
            create(message, "light");
        };
        transparent = function (message) {
            create(message, "transparent");
        };
        return {
            warning: warning,
            info: info,
            light: light,
            transparent: transparent
        };
    }
于 2019-12-12T23:04:05.203 回答
0

我发现AlertifyJS是一个更好的选择，并且有一个 Bootstrap 主题。

alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); });

也有4 个组件：Alert、Confirm、Prompt和Notifier。

示例：JSFiddle

于 2017-01-17T16:46:41.500 回答