<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="pull-alert"> <div class="alert alert-success pull-right" > <button type="button" class="btn btn-default btn-circle btn-xl-alert btn-lateral btn-float-alert"><i class="glyphicon glyphicon-envelope"></i></button> <hr class="hr-alert"> <strong>¡Lo sentimos! ha ocurrido un error al cargar el archivo</strong> </div> </div>

.alert{ position: absolute; padding-right: 55px; width: 300px; margin-top: 40px; border-radius: 15px; background-color: #FFF; color: #283896; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); display: none; } /*alert-success*/ .alert-success button{ background-color: #008ECF; color:#FFF; } .alert-success hr{ border-color: #008ECF; } /**/ /*alert-warning*/ .alert-warning button{ background-color: #E5A218; color:#FFF; } .alert-warning hr{ border-color: #E5A218; } /**/ /*alert-error*/ .alert-error button{ background-color: #FF0000; color:#FFF; } .alert-error hr{ border-color: #FF0000; } /**/ .hr-alert { margin-top: 0px; margin-bottom: 10px; border: 0; border-top: 4px solid #eee; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl-alert { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; cursor:default; transition: background-color 1s, color 1s; } .btn-float-alert{ position: absolute; right:-20px; top:-20px; } .pull-right { position: absolute; right: 5%; }

$(document).ready(function () { $('.alert').fadeIn(); setTimeout(function(){ $('.alert').fadeOut() }, 7000); });