<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 id="noty-holder"></div><!-- HERE IS WHERE THE NOTY WILL APPEAR-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" id="main">
<div class="starter-template">
<h1>Notification Using Alerts</h1>
<p class="lead">No Extra Plugins, just enjoy you Bootstrap template with Notifications.</p>
<p class="lead">Create a Div With ID called "noty-holder" and then use the function createNoty('LOREM IPSUM 1', 'info');.</p>
<p class="lead">Success is the default option.</p>
</div>
</div><!-- /.container -->
#noty-holder{
width: 100%;
top: 50;
font-weight: bold;
position: absolute;
z-index: 1031; /* Max Z-Index in Fixed Nav Menu is 1030*/
text-align: center;
position: fixed;
}
.alert{
margin-bottom: 2px;
border-radius: 0px;
}
#main{
min-height:900px;
}
function createNoty(message, type) {
var n = "success";
if (type == "info") {
n = "info"
} else if (type == "warning") {
n = "warning"
} else if (type == "danger") {
n = "danger"
}
var html = '<div class="alert alert-' + n + ' alert-dismissable">';
html += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
html += message;
html += '</div>';
//$('body').append(html).show('slow');
$(html).hide().prependTo('#noty-holder').fadeIn(1000);
}
$(function(){
createNoty('success', 'success');
createNoty('warning', 'warning');
createNoty('danger', 'danger');
createNoty('info', 'info');
})
