Layer over form and waiting icon

proteje la forma de que sea editada mientras se envia

by Ruben Ruiz Perez

HTML

<table height="99" border="0" cellpadding="5" cellspacing="0" id="table">
  <tr>
    <td>Usuario:</td>
    <td>
      <input type="text" name="textfield" id="textfield" />
    </td>
  </tr>
  <tr>
    <td>password:</td>
    <td>
      <input type="text" name="textfield2" id="textfield2" />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="button" name="button1" id="button1" value="Start" /></td>
  </tr>
</table>

<div id="overlay">
  <img src="http://www.rosarito.gob.mx/e-gobierno/images/loader/ajax-loader-squares-circle.gif"  id="img-load" />
</div>
    <input type="button" name="button2" id="button2" value="End Animation" />

CSS

body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
}
#overlay { 
  display:none; 
  position:absolute; 
  background:#eee; 
}
#img-load { 
  position:absolute; 
}

JavaScript

/* login make animation for send */
 $( document ).ready(function()
 {
   $t = $("#table"); // CHANGE it to the table's id you have
		
		$("#overlay").css({
		  opacity : 0.7,
		  top     : $t.offset().top,
		  width   : $t.outerWidth(),
		  height  : $t.outerHeight()
		});
		
		$("#img-load").css({
		  top  : ($t.height() / 2)-15,
		  left : ($t.width() / 2)-15
		});
			  
	 	  
	  
    $( "#button1" ).click(function() {
	 $("#overlay").fadeIn();
	});
	
	$( "#button2" ).click(function() {
	  $("#overlay").fadeOut();
	});
	
  });//ready