Manipulating TwBootstrap Alerts with JQuery

Language: Javascript

Posted by: Marco V.

Added: Jul 19, 2012 7:14 PM

Modified: Aug 17, 2012 3:26 PM

Tags: alert bootstrap javascript jquery twitter

-Showing and hiding alerts with jQuery functions slideUp() and slideDown()
-Classes ".alert", ".close" and ".btn" are used from bootstrap
-Remember including the necessary files, both bootstrap and jquery. Should be something like this:
<script src="bootstrap/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script language="javascript">
$(document).ready(function(){
//hide the alert div when page load
$("div#msg_error").hide();
//hide the alert div when clicking the button "boton_cerrar"
$("#boton_cerrar").click(function(){
$("div#msg_error").slideUp();
return false;
});
//show the alert div
$("#boton_error").click(function(){
$("div#msg_error span").html("Hola, este es mi error");
$("div#msg_error").slideDown();
});
});
</script>
<body>
<div class="alert alert-error" id="msg_error">
<a href="#" class="close" data-dismiss="alert" id="boton_cerrar">×</a>
<strong>Error:</strong>
<span>mensaje</span>
</div>
<input type="button" class="btn" value="Mostrar error" id="boton_error" />
</body>

Welcome to TagMyCode

Manipulating TwBootstrap Alerts with JQuery

Write a comment