<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Simple Bootstrap alerts for every day use</h2> <h4>All messages close automatically after 6 seconds <small>(Can be changed in js)</small></h4> <button class="btn btn-info" onclick="info('Your info is saved properly.')">Info</button> <button class="btn btn-warning" onclick="warning('Are you sure ?')">Warning</button> <button class="btn btn-danger" onclick="error('Unknown error occurred.')">Error</button> <button class="btn btn-success" onclick="success('All Saved.')">Success</button> </div> </div>

.top-alert { position: fixed; top: 0px; width: 100%; z-index: 100000; left: 0; padding: 20px; display: inline-block; text-align: center; } .top-alert .alert { width: auto !important; height: 100%; display: inline; position: relative; margin: 0; } .top-alert .alert .close { position: absolute; top: 11px; right: 10px; color: inherit; }

window.error = function(msg) { var dom = '<div class="top-alert"><div class="alert alert-danger alert-dismissible fade in " role="alert"><i class="glyphicon glyphicon-exclamation-sign"></i> ' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'; var jdom = $(dom); jdom.hide(); $("body").append(jdom); jdom.fadeIn(); setTimeout(function() { jdom.fadeOut(function() { jdom.remove(); }); }, 6000); } window.warning = function(msg) { var dom = '<div class="top-alert"><div class="alert alert-warning alert-dismissible fade in " role="alert"><i class="glyphicon glyphicon-question-sign"></i> ' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'; var jdom = $(dom); jdom.hide(); $("body").append(jdom); jdom.fadeIn(); setTimeout(function() { jdom.fadeOut(function() { jdom.remove(); }); }, 6000); } window.info = function(msg) { var dom = '<div class="top-alert"><div class="alert alert-info alert-dismissible fade in " role="alert"><i class="glyphicon glyphicon-info-sign"></i> ' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'; var jdom = $(dom); jdom.hide(); $("body").append(jdom); jdom.fadeIn(); setTimeout(function() { jdom.fadeOut(function() { jdom.remove(); }); }, 6000); } window.success = function(msg) { var dom = '<div class="top-alert"><div class="alert alert-success alert-dismissible fade in " role="alert"><i class="glyphicon glyphicon-ok"></i> ' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>'; var jdom = $(dom); jdom.hide(); $("body").append(jdom); jdom.fadeIn(); setTimeout(function() { jdom.fadeOut(function() { jdom.remove(); }); }, 6000); }