Tự động tạo hộp cảnh báo Bootstrap thông qua JavaScript

Question

Tôi đang sử dụng Bootstrap 2.0 cho dự án của mình và tôi muốn tự động thêm hộp cảnh báo Bootstrap vào trang của mình (http://twitter.github.com/bootstrap/javascript.html#alerts). Tôi muốn làm điều gì đó như:

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

Answer 1

Hãy thử điều này (xem một ví dụ làm việc của mã này trong 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>​ 

EDIT: Hiện nay có thư viện mà đơn giản hóa và đơn giản hóa quá trình này như bootbox.js

Answer 2

Bạn cũng có thể tạo ra một mẫu cảnh báo HTML như thế này:

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

Và như vậy bạn có thể làm trong JavaScript này ở đây:

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

Đó là theo ý kiến ​​của tôi sạch hơn và nhanh hơn. Ngoài ra, bạn còn tuân thủ các tiêu chuẩn của Twitter Bootstrap khi gọi fadeIn().

Để đảm bảo rằng mẫu cảnh báo này cũng làm việc với nhiều cuộc gọi (vì vậy nó không thêm tin nhắn mới đến cũ), thêm này vào đây để JavaScript:

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

Vì vậy, cuộc gọi này loại bỏ span phần tử mỗi khi bạn đóng cảnh báo thông qua nút x.

Answer 3

/** 
    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 4

Tìm thấy điều này trong ngày hôm nay, thực hiện một số điều chỉnh và kết hợp các tính năng của các câu trả lời khác trong khi cập nhật nó lên bootstrap 3.x. NB: Câu trả lời này yêu cầu jQuery.

Trong html:

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

Trong 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>​ 

Sau đó, bạn có thể gọi này như:

bootstrap_alert('#form_errors', 'This message will fade out in 1 second', 1000) 
bootstrap_alert('#form_errors', 'User must dismiss this message manually') 

Answer 5

tôi đã tạo Plugin rất đơn giản và cơ bản này:

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

Cách sử dụng

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

Plugin đầu tiên và nó có thể dễ dàng thực hiện tốt hơn

Answer 6

tôi đã kết thúc bằng toastr (https://github.com/CodeSeven/toastr) với những thay đổi phong cách Make toastr alerts look like bootstrap alerts

Answer 7

tôi thấy rằng AlertifyJS là một lựa chọn tốt hơn và có một chủ đề Bootstrap.

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

Cũng có một 4 thành phần: Alert, Confirm, Prompt và Notifier.

Exmaple: JSFiddle

Answer 8

FWIW Tôi tạo ra một lớp JavaScript có thể được sử dụng tại thời gian chạy.
Nó kết thúc trên GitHub, here.

Có một readme đó với một sâu sắc hơn lời giải thích, nhưng tôi sẽ làm một ví dụ nhanh dưới đây:

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

Trên đây sẽ tạo ra một cảnh báo chính đơn giản với một yếu tố đoạn bên trong chứa văn bản "Một số nội dung ở đây".

Ngoài ra còn có các tùy chọn có thể được đặt khi khởi tạo.
Đối với yêu cầu của bạn, bạn sẽ làm:

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

Phương pháp render sẽ trả về một phần tử HTML, mà sau đó có thể được chèn vào DOM. Trong trường hợp này, chúng tôi gắn nó vào cuối thẻ body.

Đây là thư viện đang hoạt động nhưng vẫn hoạt động tốt.