Question

我正在为我的项目使用Bootstrap 2.0，我想在我的页面（http://twitter.github.com/bootstrap/javascript.html#alerts）中动态添加Bootstrap警告框。我想做点什么：

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

Answer 1

试试这个（请参阅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

Answer 2

/**
  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);
  }

Answer 3

您还可以创建如下的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()时，您会坚持使用Twitter Bootstrap标准。

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

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

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

Answer 4

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

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

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

Answer 5

今天发现这个，进行了一些调整，并结合其他答案的功能，同时将其更新为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')

Answer 6

FWIW我创建了一个可以在运行时使用的JavaScript类它已经结束{{3}}。

有一个自述文件有一个更深入的解释，但我会在下面做一个简单的例子：

mod_wsgi-express setup-server wsgi.py --port=80 \
    --user www-data --group www-data \
    --server-root=/etc/mod_wsgi-express-80

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

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

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());方法将返回一个HTML元素，然后可以将其插入到DOM中。在这种情况下，我们将它附加到body标签的底部。

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

Answer 7

我最终使用toastr（https://github.com/CodeSeven/toastr）进行了样式修改Make toastr alerts look like bootstrap alerts

Answer 8

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

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

还有 4个组件：提醒，确认，提示和通知

例如：JSFiddle

Answer 9

回顾一下：

$(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>

codepen

Answer 10

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
        };
    }

通过JavaScript动态创建Bootstrap警报框

10 个答案: