Dynamic Alerts Demo
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<div class="alerts">
</div>
<button id="add" class="btn">Add Alerts</button>
JavaScript
(function(window, $, undefined) {
if(!String.prototype.format) {
String.prototype.format = function () {
var str = this;
for (var i = 0; i < arguments.length; i++) {
str = str.replace('{' + i + '}', arguments[i]);
}
return str;
};
}
// alerts encapsulate alerting information that use Twitter Bootstrap to add
// close functionality to messages/alerts
//
// use it like this:
//
// window.[Name].msg.success('my message', 'my title', true);
//
var Alerts = (function(){
// global alerts placeholder, where alerts will be added
var $alerts = $('.alerts');
// function that checks what has been provided and returns defaults
// for instance if title is bool it probably is what user provided for pernament
//
// rules:
//
// - if `title` is undefined, use defaultTitle value
// - if `title` is bool, it means it's `permanent` value
// - if `permanent` is undefined, user `false` value for it
var getSettings = function(defaultTitle, message, title, permanent) {
if(title && !permanent) {
if(title === true || title === false) {
permanent = title;
title = undefined;
} else {
permanent = false;
}
}
if(!title) {
title = defaultTitle;
}
return {
message: message,
title: title,
permanent: permanent
}
};
// method constructs an alert element - HTML string based on the options
// passed by `getSettings`
//
// `type` defines a type of the alert to show:
//
// - success
// - warning
// - error
// - info
var getAlert = function(type, options) {
...