Use a JavaScript method to add bootstrap alerts to the dom all animated and what not. Also has a self destruct option
A Pen by Cody Sechelski on CodePen.
Use a JavaScript method to add bootstrap alerts to the dom all animated and what not. Also has a self destruct option
A Pen by Cody Sechelski on CodePen.
<div id="pageMessages"> | |
</div> | |
<div class="jumbotron"> | |
<div class="container"> | |
<h1>Let's create some Alerts</h1> | |
</div> | |
</div> | |
<div class="container"> | |
<button class="btn btn-danger" onclick="createAlert('Opps!','Something went wrong','Here is a bunch of text about some stuff that happened.','danger',true,false,'pageMessages');">Add Danger Alert</button> | |
<button class="btn btn-success" onclick="createAlert('','Nice Work!','Here is a bunch of text about some stuff that happened.','success',true,true,'pageMessages');">Add Success Alert</button> | |
<button class="btn btn-info" onclick="createAlert('BTDubs','','Here is a bunch of text about some stuff that happened.','info',false,true,'pageMessages');">Add Info Alert</button> | |
<button class="btn btn-warning" onclick="createAlert('','','Here is a bunch of text about some stuff that happened.','warning',false,true,'pageMessages');">Add Warning Alert</button> | |
</div> |
function createAlert(title, summary, details, severity, dismissible, autoDismiss, appendToId) { | |
var iconMap = { | |
info: "fa fa-info-circle", | |
success: "fa fa-thumbs-up", | |
warning: "fa fa-exclamation-triangle", | |
danger: "fa ffa fa-exclamation-circle" | |
}; | |
var iconAdded = false; | |
var alertClasses = ["alert", "animated", "flipInX"]; | |
alertClasses.push("alert-" + severity.toLowerCase()); | |
if (dismissible) { | |
alertClasses.push("alert-dismissible"); | |
} | |
var msgIcon = $("<i />", { | |
"class": iconMap[severity] // you need to quote "class" since it's a reserved keyword | |
}); | |
var msg = $("<div />", { | |
"class": alertClasses.join(" ") // you need to quote "class" since it's a reserved keyword | |
}); | |
if (title) { | |
var msgTitle = $("<h4 />", { | |
html: title | |
}).appendTo(msg); | |
if(!iconAdded){ | |
msgTitle.prepend(msgIcon); | |
iconAdded = true; | |
} | |
} | |
if (summary) { | |
var msgSummary = $("<strong />", { | |
html: summary | |
}).appendTo(msg); | |
if(!iconAdded){ | |
msgSummary.prepend(msgIcon); | |
iconAdded = true; | |
} | |
} | |
if (details) { | |
var msgDetails = $("<p />", { | |
html: details | |
}).appendTo(msg); | |
if(!iconAdded){ | |
msgDetails.prepend(msgIcon); | |
iconAdded = true; | |
} | |
} | |
if (dismissible) { | |
var msgClose = $("<span />", { | |
"class": "close", // you need to quote "class" since it's a reserved keyword | |
"data-dismiss": "alert", | |
html: "<i class='fa fa-times-circle'></i>" | |
}).appendTo(msg); | |
} | |
$('#' + appendToId).prepend(msg); | |
if(autoDismiss){ | |
setTimeout(function(){ | |
msg.addClass("flipOutX"); | |
setTimeout(function(){ | |
msg.remove(); | |
},1000); | |
}, 5000); | |
} | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
#pageMessages { | |
position: fixed; | |
bottom: 15px; | |
right: 15px; | |
width: 30%; | |
} | |
#pageMessages .alert { | |
position: relative; | |
} | |
#pageMessages .alert .close { | |
position: absolute; | |
top: 5px; | |
right: 5px; | |
font-size: 1em; | |
} | |
#pageMessages .alert .fa { | |
margin-right:.3em; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> |