<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"> <div class="popupunder alert alert-success fade in"><button type="button" class="close close-sm" data-dismiss="alert"><i class="glyphicon glyphicon-remove"></i></button><strong>Success : </strong> The update process has been completed successfull!</div> </div> </div>

.popupunder{ width: 300px; position:fixed; top: 10px; right: 10px; z-index: 10; border: 0; padding: 20px; } .popupunder.alert-success{ border: 1px solid #198b49; background:#27AE60; color:#fff; } .popupunder .close{ font-size: 10px; position:absolute !important; right: 2px; top: 3px; }

$('.popovers').popover(); window.setTimeout(function() { $(".alert").fadeTo(2000, 500).slideUp(500, function(){ $(this).remove(); }); // 500 : Time will remain on the screen }, 500);