Crear Tabla con JQuery.

En el presente post te presento la forma de crear una tabla responsiva utilizando Bootstrap y JQuery.

Helper.js

//Función para generar y retornar un conjunto de datos de prueba.
function ObtenDatos()
{
	var _personas= 
	[
		{
			personaId: 1,
			nombre: 'Adrian',
			apellidoPaterno: 'Gonzalez',
			apellidoMaterno: 'Fernandez',
			fechaNacimiento: '1990-10-12',
			genero: 'M'			
		},
		{
			personaId: 2,
			nombre: 'Maria',
			apellidoPaterno: 'Sanchez',
			apellidoMaterno: 'Torres',
			fechaNacimiento: '1960-02-04',
			genero: 'F'
		},
		{
			personaId: 3,
			nombre: 'Luis Fernando',
			apellidoPaterno: 'Morales',
			apellidoMaterno: 'Salgado',
			fechaNacimiento: '1988-09-20',
			genero: 'M'			
		},
		{
			personaId: 4,
			nombre: 'Victor',
			apellidoPaterno: 'Ferrer',
			apellidoMaterno: 'Lopez',
			fechaNacimiento: '1970-05-21',
			genero: 'M'
		},
		{
			personaId: 5,
			nombre: 'Amanda',
			apellidoPaterno: 'Sandria',
			apellidoMaterno: 'Martinez',
			fechaNacimiento: '1991-09-15',
			genero: 'F'
		},
		{
			personaId: 6,
			nombre: 'Rodrigo',
			apellidoPaterno: 'Montes',
			apellidoMaterno: 'Hernandez',
			fechaNacimiento: '1985-07-27',
			genero: 'M'
		},
		{
			personaId: 7,
			nombre: 'Emilio',
			apellidoPaterno: 'Duran',
			apellidoMaterno: 'Ruiz',
			fechaNacimiento: '2000-01-06',
			genero: 'M'
		},
		{
			personaId: 8,
			nombre: 'Santiago',
			apellidoPaterno: 'Montiel',
			apellidoMaterno: 'Garcia',
			fechaNacimiento: '1970-06-20',
			genero: 'M'
		},                  
		{
			personaId: 9,
			nombre: 'Monica',
			apellidoPaterno: 'Ortigoza',
			apellidoMaterno: 'Posadas',
			fechaNacimiento: '1975-11-04',
			genero: 'F'
		},
		{
			personaId: 10,
			nombre: 'Ricardo',
			apellidoPaterno: 'Parra',
			apellidoMaterno: 'Zuñiga',
			fechaNacimiento: '1997-08-16',
			genero: 'M'
		}		
	]

	return _personas;
}

//Función para crear la tabla.
function MuestraPersonas(tabla, datos)
{
	//Se limpiar el contenido de la tabla, excepto los titulos de las columnas.
	$('#' + tabla).find('tr:not(:first)').remove();		

	//Se valida si el origen de datos no contiene información.
	if(datos==null || datos.length==0)
	{		
		//Se crea una nueva fila.
		var _filaVacia = $((document).createElement('tr'));
        _filaVacia.css('text-align', 'center');

		//Se anexa la fila a la tabla.
        $('#' + tabla).append(_filaVacia);
		
		//Se crea una columna y se le asigna un tamaño de 4 columnas.
        var _columnaVacia = $((document).createElement('td'));            
        _columnaVacia.attr('colspan', 4);

		//Se crea un nodo de texto para definir un mensaje que se mostrará cuando no haya elementos.
        var _contenidoVacio = $((document).createTextNode('No se encontraron resultados :('));
		
		//Se anexa el nodo de texto a la columna.
        _columnaVacia.append(_contenidoVacio);
            
		//Se anexa la columna a la fila.
        _filaVacia.append(_columnaVacia);
		
		//Se finaliza la función.
		return;
	}
	
	//Se recorre cada uno de los elementos del origen de datos.
	$.each(datos, function (key, item)
	{
		//Se crea una nueva fila y se le asigna un identificador.
		var _fila= $((document).createElement('tr'));
		_fila.attr('id', 'fila'+item.personaId);

		//Se anexa la fila a la tabla.
		$('#' + tabla).append(_fila)
		
		//Identificador de la persona.

		//Se crea una nueva columna para encapsular los identificadores de las personas.		
		var _columnaPersonaId= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el identificador de la persona.
		var _personaId= $((document).createTextNode(item.personaId));
		
		//Se anexa a la columna [_columnaPersonaId] el nodo de texto.
		_columnaPersonaId.append(_personaId);
		
		//Se anexa la columna [_columnaPersonaId] a la fila.
		$('#fila' + item.personaId).append(_columnaPersonaId);
		
		//Nombre completo.
		
		//Se crea una nueva columna para encapsular el nombre completo de las personas.		
		var _columnaNombre= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el nombre completo de la persona.
		var _nombre= $((document).createTextNode(item.nombre + ' ' + item.apellidoPaterno + ' ' + item.apellidoMaterno));
		
		//Se anexa a la columna [_columnaNombre] el nodo de texto.
		_columnaNombre.append(_nombre);
		
		//Se anexa la columna [_columnaNombre] a la fila.
		$('#fila' + item.personaId).append(_columnaNombre);

		//Fecha de Nacimiento.
		
		//Se crea una nueva columna para encapsular la fecha de nacimiento de las personas.		
		var _columnaFechaNacimiento= $((document).createElement('td'));
		
		//En caso de que la fecha venga en formato largo, se debera de obtener el formato corto para cuestiones de presentación.
		var _fechaCorta= item.fechaNacimiento.split(' ')[0];
		
		//Se da formato a la fecha para presentarla como DD/MM/YYYY.
		var _elementosFecha= _fechaCorta.split('-');
		var _fecha= _elementosFecha[2] + '/' + _elementosFecha[1] + '/' + _elementosFecha[0];
				
		//Se crea un nodo de texto y se le asigna la fecha de nacimiento de la persona.
		var _fechaNacimiento= $((document).createTextNode(_fecha));
		
		//Se anexa a la columna [_columnaFechaNacimiento] el nodo de texto.
		_columnaFechaNacimiento.append(_fechaNacimiento);
		
		//Se anexa la columna [_columnaFechaNacimiento] a la fila.
		$('#fila' + item.personaId).append(_columnaFechaNacimiento);
		
		//Genero
		
		//Se crea una nueva columna para encapsular el genero de de las personas.		
		var _columnaGenero= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el genero de la persona.
		var _genero= $((document).createTextNode((item.genero == 'F')? 'Femenino': 'Masculino'));
		
		//Se anexa a la columna [_columnaGenero] el nodo de texto.
		_columnaGenero.append(_genero);
		
		//Se anexa la columna [_columnaGenero] a la fila.
		$('#fila' + item.personaId).append(_columnaGenero);
	});		
}

Tabla.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="utf-8">
	<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">    
	<link href="../css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container">
		<div class="row">
			<br/>
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading">				
						<div style="text-align:center;">
							Creación de una tabla con JQuery
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-12">
								<button type="button" id="btnCreaTabla" name="btnCreaTabla" class="btn btn-success">Crear tabla
								</button>                            
							</div>
						</div>
						<br/>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table id="tblConsulta" class="table table-bordered table-hover textColor" style="width:100%;">
										<tr style="font-weight: bold; background-color: #373a3c; color: white;">                                        
											<td class="bold">#</td>
											<td class="bold">Nombre</td>																			
											<td class="bold">Fecha de Nacimiento</td>
											<td class="bold">Genero</td>											
										</tr>
									</table>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../scripts/jquery-2.2.1.js"></script>
	<script src="../scripts/bootstrap.js"></script>
	<script src="../scripts/helper.js"></script>
	
	<script type='text/javascript'>	
		$(document).ready(function()
		{
			//Se invoca la función para crear y mostrar la tabla cuando no hay origen de datos.
			MuestraPersonas('tblConsulta', null);
		
			//Se asocia el evento click al Button [btnCreaTabla].
			$('#btnCreaTabla').on('click', function()
			{				
				//Se invoca a la función para crear y mostrar la tabla con un origen de datos.
				MuestraPersonas('tblConsulta', ObtenDatos());
			});		
		});
	</script>
</body>
</html>

En el siguiente enlace podrás descargar el código fuente completo:

Tabla con JQuery.rar (215,67 kb)

Filtros en Cascada en Grid Kendo.

Aplicación

HTML / JavaScript

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    
	<title>Grid Kendo con filtros en cascada</title>
	<link href="http://www.critza.com//Pages/Grid%20Kendo/css/kendo.common.min.css" rel="stylesheet"/>
    <link href="http://www.critza.com//Pages/Grid%20Kendo/css/kendo.custom.css" rel="stylesheet"/>
	
	<script type="text/javascript">
		function FilterMenu(e)
		{
			if (e.sender.dataSource.options.schema.model.fields[e.field].type == "date")
			{
				var _primerOperador = e.container.find("select:eq(0)").data("kendoDropDownList");
				var _operadorCondicional = e.container.find("select:eq(1)").data("kendoDropDownList");
				var _segundoOperador = e.container.find("select:eq(2)").data("kendoDropDownList");

				this.thead.find("[data-field='fechaNacimiento'] .k-grid-filter").click(function (e)
				{
					setDropDownList();
				});

				var setDropDownList = function ()
				{
					_primerOperador.value("gte");
					_primerOperador.trigger("change");

					_operadorCondicional.value("and");
					_operadorCondicional.trigger("change");

					_segundoOperador.value("lte");
					_segundoOperador.trigger("change");
				}

				setDropDownList();

				setTimeout(function ()
				{
					_primerOperador.wrapper.hide();
					_segundoOperador.wrapper.hide();
					_operadorCondicional.wrapper.hide();
				});

				var _iterador=1;

				e.container.find(":input").each(function ()
				{
					if(_iterador==2 || _iterador==5)
						($(this).attr("readonly", true));
					else
					{
						var _widget = kendo.widgetInstance($(this));

						if(_widget)
							_widget.readonly(true);
					}

					_iterador+=1;
				});
			}

			if(e.field=='estadoNacimiento')
			{
				var _filtroMultiCheck =  this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");

				if(_cargaInicialEstadoNacimiento)
				{
					_cargaInicialEstadoNacimiento=false;
					FiltroEstadoNacimientoEnCascada(_filtroMultiCheck);
				}

				this.thead.find("[data-field='estadoNacimiento'] .k-grid-filter").click(function (e)
				{
					FiltroEstadoNacimientoEnCascada(_filtroMultiCheck);
				});

				setTimeout(function (){});
			}			
		}
	
		function FiltroEstadoNacimientoEnCascada(filterMultiCheck)
		{
			filterMultiCheck.container.empty();

			var _origenDatos=$('#grid').data('kendoGrid').dataSource;

			var _origenDatosFinal;

			var _filtros = _origenDatos.filter();

			if(_filtros==null)
				_origenDatosFinal= _origenDatos.data();
			else
				_origenDatosFinal= (new kendo.data.Query(_origenDatos.data())).filter(_filtros).data;

			var _arreglo= new Array();

			for (var i = 0; i < _origenDatosFinal.length; i++)
			{
				if(_origenDatosFinal[i].estadoNacimiento!=null)
				{
					var _existe=false;

					for(var x=0; x < _arreglo.length; x++)
					{
						if(_arreglo[x].estadoNacimiento == _origenDatosFinal[i].estadoNacimiento)
						{
							_existe=true;
							break;
						}
					}

					if(!_existe)
					{
						var _objeto= new Object();
						_objeto.estadoNacimiento=_origenDatosFinal[i].estadoNacimiento;
						_arreglo.push(_objeto);
					}
				}
			}

			function OrdenaElementos()
			{
				_arreglo.sort(function(a, b)
				{
					var _x = a.estadoNacimiento.toLowerCase();
					var _y = b.estadoNacimiento.toLowerCase();

					if (_x < _y)
						return -1;
					if (_x > _y)
						return 1;
					return 0;
				});
			}

			OrdenaElementos();
			filterMultiCheck.checkSource.data(_arreglo);
			filterMultiCheck.createCheckBoxes();
		}
		
		function FiltroGenero(element) {
			element.kendoDropDownList({
				dataSource: [ 'Femenino', 'Masculino' ],
                optionLabel: 'Seleccionar...'
            });
        }
	</script>
	
</head>
<body>
	<div id="grid">
	</div>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/jquery-2.1.4.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/kendo.all.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/kendo.grid.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/Cultures/kendo.culture.es-MX.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/Messages/kendo.messages.es-ES.min.js"></script>
	<script type="text/javascript">
		var _grid;
		var _origenDatos;						
		var _tamanioPaginacion=10;
		var _cargaInicialEstadoNacimiento=true;
		
		kendo.culture('es-MX');
		
		$(document).ready(function ()
		{
			_grid = $("#grid");
			
			_origenDatos= new kendo.data.DataSource
			({
				data:
				[
					{
						personaId: 1,
						nombre: 'Adrian',
						apellidoPaterno: 'Gonzalez',
						apellidoMaterno: 'Fernandez',
						fechaNacimiento: '1990-10-12',
						genero: 'Masculino',
						estadoNacimiento: 'Veracruz de Ignacio de la Llave'
					},
					{
						personaId: 2,
						nombre: 'Maria',
						apellidoPaterno: 'Sanchez',
						apellidoMaterno: 'Torres',
						fechaNacimiento: '1960-02-04',
						genero: 'Femenino',
						estadoNacimiento: 'Chiapas'
					},
					{
						personaId: 3,
						nombre: 'Luis Fernando',
						apellidoPaterno: 'Morales',
						apellidoMaterno: 'Salgado',
						fechaNacimiento: '1988-09-20',
						genero: 'Masculino',
						estadoNacimiento: 'Oaxaca'
					},
					{
						personaId: 4,
						nombre: 'Victor',
						apellidoPaterno: 'Ferrer',
						apellidoMaterno: 'Lopez',
						fechaNacimiento: '1970-05-21',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 5,
						nombre: 'Amanda',
						apellidoPaterno: 'Sandria',
						apellidoMaterno: 'Martinez',
						fechaNacimiento: '1991-09-15',
						genero: 'Femenino',
						estadoNacimiento: 'Campeche'
					},
					{
						personaId: 6,
						nombre: 'Rodrigo',
						apellidoPaterno: 'Montes',
						apellidoMaterno: 'Hernandez',
						fechaNacimiento: '1985-07-27',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 7,
						nombre: 'Emilio',
						apellidoPaterno: 'Duran',
						apellidoMaterno: 'Ruiz',
						fechaNacimiento: '2000-01-06',
						genero: 'Masculino',
						estadoNacimiento: 'México'
					},
					{
						personaId: 8,
						nombre: 'Santiago',
						apellidoPaterno: 'Montiel',
						apellidoMaterno: 'Garcia',
						fechaNacimiento: '1970-06-20',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},					
					{
						personaId: 9,
						nombre: 'Monica',
						apellidoPaterno: 'Ortigoza',
						apellidoMaterno: 'Posadas',
						fechaNacimiento: '1975-11-04',
						genero: 'Femenino',
						estadoNacimiento: 'Querétaro'
					},
					{
						personaId: 10,
						nombre: 'Ricardo',
						apellidoPaterno: 'Parra',
						apellidoMaterno: 'Zuñiga',
						fechaNacimiento: '1997-08-16',
						genero: 'Masculino',
						estadoNacimiento: 'Zacatecas'
					},
					{
						personaId: 11,
						nombre: 'Andrea',
						apellidoPaterno: 'Perdomo',
						apellidoMaterno: 'Juárez',
						fechaNacimiento: '1988-01-19',
						genero: 'Femenino',
						estadoNacimiento: 'Tabasco'
					},
					{
						personaId: 12,
						nombre: 'Armando',
						apellidoPaterno: 'Rosales',
						apellidoMaterno: 'Maza',
						fechaNacimiento: '1988-10-12',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 13,
						nombre: 'Anabel',
						apellidoPaterno: 'Jiménez',
						apellidoMaterno: 'Ortiz',
						fechaNacimiento: '1978-10-06',
						genero: 'Femenino',
						estadoNacimiento: 'Sonora'
					},
					{
						personaId: 14,
						nombre: 'Erica',
						apellidoPaterno: 'Rumilla',
						apellidoMaterno: 'Santos',
						fechaNacimiento: '1980-10-10',
						genero: 'Femenino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 15,
						nombre: 'Alejandra',
						apellidoPaterno: 'Martinez',
						apellidoMaterno: 'Maldonado',
						fechaNacimiento: '1994-08-14',
						genero: 'Femenino',
						estadoNacimiento: 'Sonora'
					},
					{
						personaId: 16,
						nombre: 'Pedro',
						apellidoPaterno: 'Carrillo',
						apellidoMaterno: 'Arcos',
						fechaNacimiento: '1997-12-23',
						genero: 'Masculino',
						estadoNacimiento: 'Yucatán'
					},
					{
						personaId: 17,
						nombre: 'Rocio',
						apellidoPaterno: 'Soto',
						apellidoMaterno: 'Quiroz',
						fechaNacimiento: '1978-11-18',
						genero: 'Femenino',
						estadoNacimiento: 'Aguascalientes'
					},
					{
						personaId: 18,
						nombre: 'Francisco',
						apellidoPaterno: 'Herrera',
						apellidoMaterno: 'Brito',
						fechaNacimiento: '1986-08-28',
						genero: 'Masculino',
						estadoNacimiento: 'Baja California Sur'
					},
					{
						personaId: 19,
						nombre: 'Karla',
						apellidoPaterno: 'Lara',
						apellidoMaterno: 'Morales',
						fechaNacimiento: '1997-03-15',
						genero: 'Femenino',
						estadoNacimiento: 'Chiapas'
					},
					{
						personaId: 20,
						nombre: 'Rodolfo',
						apellidoPaterno: 'Zapata',
						apellidoMaterno: 'Villa',
						fechaNacimiento: '1980-01-03',
						genero: 'Masculino',
						estadoNacimiento: 'Guanajuato'
					},
					{
						personaId: 21,
						nombre: 'Jonathan',
						apellidoPaterno: 'Robles',
						apellidoMaterno: 'Oronzor',
						fechaNacimiento: '2001-04-05',
						genero: 'Masculino',
						estadoNacimiento: 'Hidalgo'
					},
					{
						personaId: 22,
						nombre: 'Ingrid',
						apellidoPaterno: 'Nuñez',
						apellidoMaterno: 'Meneses',
						fechaNacimiento: '1984-10-29',
						genero: 'Femenino',
						estadoNacimiento: 'Distrito Federal'
					},
					{
						personaId: 23,
						nombre: 'Efren',
						apellidoPaterno: 'Garcia',
						apellidoMaterno: 'Flores',
						fechaNacimiento: '1991-09-25',
						genero: 'Masculino',
						estadoNacimiento: 'México'
					},
					{
						personaId: 24,
						nombre: 'Martha',
						apellidoPaterno: 'Guerrero',
						apellidoMaterno: 'Duran',
						fechaNacimiento: '1980-04-21',
						genero: 'Femenino',
						estadoNacimiento: 'Michoacán de Ocampo'
					},
					{
						personaId: 25,
						nombre: 'Ezequiel',
						apellidoPaterno: 'Romano',
						apellidoMaterno: 'Vazquez',
						fechaNacimiento: '2005-12-11',
						genero: 'Masculino',
						estadoNacimiento: 'Zacatecas'
					}					
				],
				schema:
				{
					model:
					{
						fields:
						{
							personaId: { type: 'number' },
							nombre: { type: 'string'},
							apellidoPaterno: { type: 'string' },
							apellidoMaterno: { type: 'string' },
							fechaNacimiento: { type: 'date' },
							genero: { type: 'string' },
							estadoNacimiento: { type: 'string' }
						}
					}
				},
				pageSize: _tamanioPaginacion
			});							
		
			_grid.kendoGrid
			({
				dataSource: _origenDatos,
				columnMenu: false,
				sortable: true,	
				filterMenuInit: FilterMenu,				
				filterable:
				{
					extra: false,
					messages:
					{
						search: "Buscar",
						filter: "Filtrar",
						clear: "Limpiar"
					},
					operators:
					{
						string:
						{
							eq: "Igual a",
							neq: "No es igual a",
							startswith: "Comienza con",
							endswith: "Termina en",
							contains: 'Contiene',
							doesnotcontain: 'No contiene'
						},
						number:
						{
							eq: "Igual a:",
							neq: "No es igual a:",
							gte: "Mayor o igual a:",
							lte: "Menor o igual a:"
						},     
						date:
						{
							gte: "Mayor o igual a:",
							lte: "Menor o igual a:"
						}						
					}
				},
				scrollable: true,
				pageable: true,
				columns:
				[
					{
						field: 'personaId',
						title: 'Id',
						width: 40,
						template: "<div style='text-align:justify'>#= personaId #</div>"
					},
					{
						field: 'nombre',
						title: 'Nombre',
						width: 40,
						template: "<div style='text-align:justify'>#= nombre #</div>"
					},
					{
						field: 'apellidoPaterno',
						title: 'Apellido paterno',
						width: 50,
						template: "<div style='text-align:justify'>#= apellidoPaterno #</div>"
					},
					{
						field: 'apellidoMaterno',
						title: 'Apellido materno',
						width: 50,
						template: "<div style='text-align:justify'>#= apellidoMaterno #</div>"
					},
					{
						field: 'fechaNacimiento',
						title: 'Fecha de Nacimiento',
						width: 50,
						template: "<div style='text-align:justify'>#= kendo.toString(kendo.parseDate(fechaNacimiento, 'yyyy-MM-dd'), 'dd/MM/yyyy') #</div>",
						filterable:
						{
							extra: true,
							ui: "datepicker"
						}
					},
					{
						field: 'genero',
						title: 'Genero',
						width: 40,
						template: "<div style='text-align:justify'>#= genero #</div>",
						filterable:
						{
							ui: FiltroGenero
						}
					},
					{
						field: 'estadoNacimiento',
						title: 'Estado de Nacimiento',
						width: 70,
						template: "<div style='text-align:justify'>#= estadoNacimiento #</div>",
						filterable:
						{
							multi: true,
							search: true
						}
					}				
				]
			});
		});
	</script>
</body>
</html>

En el siguiente enlace podrás descargar el código fuente:

Grid Kendo.rar (2,94 mb)

Validar Limite de Caracteres con JavaScript.

El siguiente código fuente define una función JavaScript para limitar el número de caracteres que puede almacenar un campo de entrada de texto.

HTML

<input id="txtPrueba" name="txtPrueba" type="text" onkeypress="return ValidaLongitud(this, 10);"/>

JavaScript

<script type="text/javascript">
function ValidaLongitud(campo, longitudMaxima) {
            try {
                if (campo.value.length > (longitudMaxima - 1))
					return false;
				else
					return true;             
            } catch (e) {
				return false;
            }
        }
</script>

 Código en ejecución

Lanzar ModalPopupExtender con JavaScript.

El siguiente código fuente define la creación de una ventana modal usando el componente ModalPopupExtender de AjaxControl Toolkit y una función JavaScript para desplegarla en pantalla.

ASPX

<script src="../Scripts/jquery-2.1.4.js"></script>
<asp:HiddenField ID="hfOcultoModalCargando" runat="server" />
        <asp:Panel ID="pnlModalCargando" runat="server" Width="300" CssClass="modalPopupAjax" Style="display: none">
            <div class="header"></div>
            <div class="body">
                <div class="row">
                    <div class="col-md-12">
                        <div style="text-align: center; font-weight: bold;">
                            Procesando transacción.
                            <br />
                            <br />
                            Espere por favor...
                        </div>
                    </div>
                </div>
            </div>
        </asp:Panel>
        <asp:ModalPopupExtender ID="mpeModalCargando" runat="server" TargetControlID="hfOcultoModalCargando" PopupControlID="pnlModalCargando" BackgroundCssClass="modalBackgroundAjax" DropShadow="false" BehaviorID="bMpeModalCargando" />

JavaScript

function LanzaModal()
{
   $find('bMpeModalProcesamiento').show();
}