Dynamicznie tworzyć okno alertów Bootstrap za pomocą JavaScript

Question

Używam Bootstrap 2.0 dla mojego projektu i chciałbym dynamicznie dodać pole alertu Bootstrap na mojej stronie (http://twitter.github.com/bootstrap/javascript.html#alerts). Chcę zrobić coś takiego:

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

Answer 1

Spróbuj tego (patrz działający przykład tego kodu w 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: Obecnie biblioteki, że uproszczenie i usprawnienie tego procesu , takich jak bootbox.js

Answer 2

można również utworzyć szablon HTML powiadomienie takiego:

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

A więc można zrobić w JavaScript to tutaj:

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

Który jest moim zdaniem czystsze i szybsze. Dodatkowo trzymasz się standardów Twitter Bootstrap, dzwoniąc pod numer fadeIn().

Aby zagwarantować, że ten alarm szablon współpracuje również z wieloma rozmowami (więc nie dodać nową wiadomość do starego), dodać to, żeby twój JavaScript:

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

Więc to wezwanie usuwa element span za każdym razem, gdy zamkniesz alert za pomocą przycisku 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

Znalazłem to dzisiaj, dokonałem kilku poprawek i połączyłem funkcje innych odpowiedzi podczas aktualizacji do bootstrap 3.x. NB: Ta odpowiedź wymaga jQuery.

W HTML:

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

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

Następnie można wywołać tego albo jak:

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

stworzyłem tej wtyczki bardzo prosty i podstawowy:

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

Wykorzystanie jest

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

pierwszy plugin zawsze i może być łatwo wykonane lepiej

Answer 6

skończyło się używając toastr (https://github.com/CodeSeven/toastr) z modyfikacjami stylu Make toastr alerts look like bootstrap alerts

Answer 7

stwierdziliśmy, że AlertifyJS jest lepszą alternatywą i mieć motyw Bootstrap.

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

mają również 4 komponenty: Alert, Potwierdź, Prompt i Notifier.

Exmaple: JSFiddle

Answer 8

FWIW Stworzyłem klasę JavaScript, który może być używany w czasie wykonywania.
To koniec GitHub, here.

Jest tam readme z wyjaśnieniem bardziej dogłębnej, ale zrobię poniżej krótki przykład:

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

Powyższy by stworzyć prosty podstawowy alert z elementem wewnątrz ust zawierający tekst "Niektóre treści tutaj".

Dostępne są również opcje, które można ustawić podczas inicjalizacji.
Dla wymogu chcesz zrobić:

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

Sposób render powróci elementu HTML, które następnie mogą być wstawione do DOM. W takim przypadku dołączamy ją do dolnej części znacznika body.

To jest biblioteka prac w toku, ale wciąż jest w bardzo dobrym stanie.