Skip to content

anonymous /bootstrap-notifications.js

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
Javascript for notifications (alerts) for Twitter Bootstrap
I created the following javascript to use bootstrapt's notifications through Javascript.
If you like it you may consider adding it to bootstrapt. Feel free to modify if necessary.
Be sure you define a div #notification-area, where the notifications are going to be displayed by default.
I use it with jQuery 1.7.1 but it should work with older versions. Is also use jquery.hotkeys.js ( ) for block messages hotkeys
(function( $ ){
var pub = {
* Show a notification. Default value are above in notificationOptDef
* Ex: bootstrap.notify("Your item has been successfully saved");
* Ex: bootstrap.notify("Your script cannot be saved. Please retry later.", {mode: "error"})
* Ex: bootstrap.notify("Does it stink?", {closeTime: 0, actions: [
{label: "Yes", defaultAction: true, keys: "enter", extraClasses: "primary" callback: function(){console.log("Oh oh")}},
{label: "No", keys: "esc", callback: function(){console.log("Oh great! I am happy to know that!")}}
notify: (function(){
var notificationOptDef =
mode: "info", //Chose between: info(blue), warning(yellow), success(green), error(red)
attachTo: "#notification-area", //If you want the notification to appear somewhere else use this selector.
closeTime: 5000, //0 is sticky, otherwise autoclose in X msec, if there are actions this is set to 0 by default
actions: [], //Optional if you want to use a message block. Ex: [{label: "Ok", callback: function (){...}}, ... ]
closePrevious: false, //If true close the previous notifications if there are any still open on the screen.
extraClasses: "" //space separated list of extra classes to add to the notification
var nextNotificationId = 1; //Notification Id of the current notification.
function unbindkeys($this){
var id = $this.closest(".alert-message").attr('id');
return function(message, opts){
var settings = $.extend({}, notificationOptDef, opts);
//Each notification has its own id
var id = "notificationBox"+(nextNotificationId++);
var alertActions = '';
var blockMessageClass = '';
if (settings.actions.length > 0)
for(i in settings.actions){
//This extraClasses is different than the settings.extraClasses. This is for each button
alertActions += '<a class="btn small '+(settings.actions[i].extraClasses ? settings.actions[i].extraClasses : '') +' notification-action-'+i+'" href="#">'+settings.actions[i].label+"</a> "
alertActions = '<div class="alert-actions">' + alertActions + '</div>'
blockMessageClass = " block-message";
var html = '<div id="'+id+'" class="fl-notification alert-message fade in ' +
settings.mode + blockMessageClass +" "+ settings.extraClasses+ '" data-alert="alert">'+
'<a class="close" href="#">×</a><p>' + message + '</p>' +
alertActions + '</div>';
// remove any previous notifications
if (settings.closePrevious){
var $this = $("#"+id);
$(".close", $this).click(function(){
for(i in settings.actions){
var _action = settings.actions[i];
(function(action, keys){
var $action = $("#"+id+" .notification-action-"+i);
if (action.defaultAction) $action.focus();
if (action.callback) action.callback();
if (action.keys){
$(document).bind("keyup."+id, action.keys, function(){
console.log("Action triggered:",$action);
if (settings.actions.length === 0 && //Only if there are no actions
var timerId = setTimeout(function(){
}, settings.closeTime);
* Open a block message as notification with Yes (with associated opts.yesAction) and No (with associated opts.noAction) buttons
notifyYesNo: function(message, opts){
var notificationYesNo =
actions: [
{label: "Yes", defaultAction: true, keys:"return", callback: opts.yesAction},
{label: "No", keys:"esc", callback: opts.noAction}
var settings = $.extend({}, opts, notificationYesNo);
pub.notify(message, settings);
* Open a block message as notification with Ok (with associated opts.okAction)
notifyOk: function(message, opts){
var notificationOk =
actions: [
{label: "Ok", defaultAction: true, keys:"return", callback: opts.okAction}
var settings = $.extend({}, opts, notificationOk);
pub.notify(message, settings);
* Create a very light trasparent backdrop for modal actions
* Example of use:
* bootstrap.modalBackdrop.hide();
* bootstrap.modalBackdrop.css({opacity: 0.5});
* bootstrap.modalBackdrop.css({"background-color" : "#ff0"});
modalBackdrop: (function(){
var $backdrop = $('<div class="fl-modalBackdrop" style="position: fixed;top:0;left:0;right:0;bottom:0;z-index:9998;opacity: 0.15;background-color:#fff;display:none"/>')
return $backdrop;
window['bootstrap'] = pub;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.