<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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div id="noty-holder"></div><!-- HERE IS WHERE THE NOTY WILL APPEAR-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" 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>
</nav>
<div class="container">
<div class="starter-template">
<h1>Quick to use</h1>
<p class="lead">Just add a DIV with an ID named "noty-holder"</p>
<p>Then call you Noty with:</p>
<pre>
//1st Param = Message, 2nd Param = Type of alert
createNoty('Hi! This is my message', 'info');
</pre>
</div>
</div><!-- /.container -->
#noty-holder{
width: 100%;
top: 0;
font-weight: bold;
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;
}
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
function createNoty(message, type) {
var html = '<div class="alert alert-' + type + ' alert-dismissable page-alert">';
html += '<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>';
html += message;
html += '</div>';
$(html).hide().prependTo('#noty-holder').slideDown();
$('#noty-holder').fadeIn().delay(4000).fadeOut('slow');
};
$(function(){
//createNoty('Hi! This is my message', 'info');
createNoty('<i class="fa fa-check-square-o"></i> Valor do frete atualizado no carrinho', 'success');
//createNoty('warning', 'warning');
//createNoty('danger', 'danger');
//createNoty('info', 'info');
$('.page-alert .close').click(function(e) {
e.preventDefault();
$(this).closest('.page-alert').slideUp();
});
});
