Bootstrap alert with JQuery..
Bootstrap alert with JQuery. Triggered by select change.
by Julian Garcia Castillo
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div id="snoAlertBox" class="alert alert-success" data-alert="alert">Now Update your Search</div>
<label>Rooms:
<select id="numppl">
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="text" />
CSS
body{padding:40px;background:#4f4f4f;color:#efefef}
#snoAlertBox{
position:absolute;
z-index:1400;
top:2%;
right:4%;
margin:0px auto;
text-align:center;
display:none;
}
JavaScript
$('#numppl').on('change', function () {
$("#snoAlertBox").fadeIn();
closeSnoAlertBox();
});
function closeSnoAlertBox(){
window.setTimeout(function () {
$("#snoAlertBox").fadeOut(300)
}, 3000);
}