Skip to content

Instantly share code, notes, and snippets.

@DamienChiboub

DamienChiboub/Autocloseable Bootstrap alert

Last active March 20, 2016 04:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DamienChiboub/edc19222ea9d8697a357 to your computer and use it in GitHub Desktop.
Save DamienChiboub/edc19222ea9d8697a357 to your computer and use it in GitHub Desktop.
Download ZIP
Autocloseable Bootstrap alert that require Jquery & Bootstrap library
Raw
Autocloseable Bootstrap alert
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Autocloseable Bootstrap alert</title>
<style id="css">
#hide{
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Autocloseable Bootstrap alert</h1>
<p class="lead">with javascript timer</p>
<div class="text-center"><a class="btn btn-primary" href="javascript:history.go(0)" role="button"><span class="glyphicon glyphicon-refresh"></span> Refresh</a>
</div>
<a href="https://twitter.com/Damien_Chiboub" target="_blank" class="pull-right">dvi-</a>
</div>
</div>
<div class="alert alert-success alert-dismissible" id="hide">
<strong>Well done!</strong> You successfully read this important alert message.
<b id="timer"></b> secondes
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span>
</button>
</div>
<script id="javascript">
setTimeout(myTimeout5, 0);
setTimeout(myTimeout4, 1000);
setTimeout(myTimeout3, 2000);
setTimeout(myTimeout2, 3000);
setTimeout(myTimeout1, 4000);
setTimeout(myLastTimeout, 5500);
function myTimeout5() {
document.getElementById("timer").innerHTML = "5";
}
function myTimeout4() {
document.getElementById("timer").innerHTML = "4";
}
function myTimeout3() {
document.getElementById("timer").innerHTML = "3";
}
function myTimeout2() {
document.getElementById("timer").innerHTML = "2";
}
function myTimeout1() {
document.getElementById("timer").innerHTML = "1";
}
function myLastTimeout() {
document.getElementById("timer").innerHTML = "";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment