×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

Manipulating TwBootstrap Alerts with JQuery

0
0
 
0
Language: Javascript
Posted by: Marco V.
Added: Jul 19, 2012 7:14 PM
Modified: Aug 17, 2012 3:26 PM
Views: 113
Tags: jquery javascript alert bootstrap 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" />
  1. <script language="javascript">
  2.  
  3. $(document).ready(function(){
  4. //hide the alert div when page load
  5.                 $("div#msg_error").hide();
  6.  
  7. //hide the alert div when clicking the button "boton_cerrar"
  8.         $("#boton_cerrar").click(function(){
  9.                         $("div#msg_error").slideUp();
  10.                         return false;
  11.                 });    
  12. //show the alert div
  13.                 $("#boton_error").click(function(){
  14.                       $("div#msg_error span").html("Hola, este es mi error");
  15.                       $("div#msg_error").slideDown();
  16.                 });
  17. });
  18. </script>
  19.  
  20. <!-- ejemplo del div dentro del BODY -->
  21. <body>
  22. <div class="alert alert-error" id="msg_error">
  23.       <a href="#" class="close" data-dismiss="alert" id="boton_cerrar">&times;</a>
  24.       <strong>Error:</strong>
  25.       <span>mensaje</span>      
  26. </div>
  27.  
  28. <input type="button" class="btn" value="Mostrar error" id="boton_error" />
  29. </body>
  30.  

Write a comment

To post comments, please log in or register.