<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="btn-group" role="group" aria-label="...">
<a href="#" class="fvralerttop btn btn-info" data-alerttype="info" data-alerttitle="FYI, something just happened!" data-alertmsg="This is just a info notification message.">Info</a>
<a href="#" class="fvralerttop btn btn-danger" data-alerttype="error" data-alerttitle="Ups, an error ocurred" data-alertmsg="This is just a error notification message.">Error</a>
<a href="#" class="fvralerttop btn btn-warning" data-alerttype="warning" data-alerttitle="Wait, I must warn you!" data-alertmsg="This is just a warning notification message.">Warning</a>
<a href="#" class="fvralerttop btn btn-success" data-alerttype="success" data-alerttitle="Congrats, you did it!" data-alertmsg="This is just a success notification message.">Success</a>
<a href="#" class="btn btn-primary fvrajaxtest">AJAX</a>
</div>
.fvralerttopmsg
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-webkit-animation: animate-bg 5s linear infinite;
-moz-animation: animate-bg 5s linear infinite;
z-index: 9999;
}
@-webkit-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@-moz-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
.fvralerttopmsg h3 { margin: 0 0 5px 0; }
.fvralerttopmsg p { margin: 0; }
.info
{
background-color: #4ea5cd;
border-color: #3b8eb5;
}
.error
{
background-color: #de4343;
border-color: #c43d3d;
}
.warning
{
background-color: #eaaf51;
border-color: #d99a36;
}
.success
{
background-color: #61b832;
border-color: #55a12c;
}
$(document).ready(function(){
function fvrcreatealert(fvralerttype,fvralerttitle,fvralertmsg,id){
if (typeof(id)==='undefined') { id = ''; } else { id = 'id="fvralert'+id+'" '; }
var fvralerttoplayout = '<div '+id+'class="fvralerttopmsg '+fvralerttype+'"><h3>'+fvralerttitle+'</h3><p>'+fvralertmsg+'</p></div>';
$("body").append(fvralerttoplayout);
$('.fvralerttopmsg').css('top', -$('.fvralerttopmsg').outerHeight()+'px');
$('.fvralerttopmsg').animate({top:"0px"}, 500);
}
function fvrclosealert(id){
if (typeof(id)==='undefined') { id = '.fvralerttopmsg'; } else { id = '#fvralert'+id }
$(id).animate({top: -$('.fvralerttopmsg').outerHeight()+'px'}, 500,"linear",function() { $(this).remove(); });
}
$('.fvralerttop').click(function(){
var fvralerttype = $(this).data('alerttype');
var fvralerttitle = $(this).data('alerttitle');
var fvralertmsg = $(this).data('alertmsg');
fvrcreatealert(fvralerttype,fvralerttitle,fvralertmsg);
});
$(".fvrajaxtest").click(function(e){
e.preventDefault();
$.ajax({
url:'http://echo.jsontest.com/status/success/msg/Teste enviado com sucesso',
dataType: "json",
beforeSend: function(html) { // this happen before actual call
fvrcreatealert('warning','Executando AJAX','Aguarde em quanto o teste está sendo feito.','ajaxbefore');
},
success:function(data){
fvrclosealert('ajaxbefore');
fvrcreatealert(data['status'],'AJAX OK',data['msg'],'ajaxsucess');
},
error: function (request, status, error) {
fvrclosealert('ajaxbefore');
fvrcreatealert('error','AJAX ERROR',error,'ajaxerror');
},
});
return false;
});
$(document).on('click', '.fvralerttopmsg', function(e)
{
fvrclosealert();
e.preventDefault();
return false;
});
});
