CREA UN ARCHIVO .js y pega esto:
despues lo vinculas a un html con un boton y a su evento click le asignas pClick();
//AUTOR: EDUARDO ACEVEDO FARJE
//EMAIL:
[email protected]
//
//CONOCEME UN POCO:
//
//Una de mis grandes manias es usar prefijos tanto para variables como
//metodos y funciones, Por que?
//1.- En lenguajes debilmente tipados tales como PHP, Javascript, ASP etc, sirve de informacion
// sobre el tipo de dato que guarda esa variable.
//
//2.- Si trabajas en un entorno que tenga intelisense (ejemplo Eclipse, NetBeans, Visualstudio, Flex etc)
// te sirve como filtro. Al buscar tus funciones sabes que todas comienzan por f, asi al presionar f
// se listan tus variables y funciones con prefijo f.
//
//3.- Hace mas legible el codigo. A aquellos programadores noveles les va indicando
// cual es la estructura del algoritmo. No es lo mismo definir una funcion:
//
// function Mifuncion(a,b,d){...} a su equivalente function fStrMifuncion(sA,iB,eD){...}
//
// La segunda te dice que es una funcion que devuelve una cadena (Str)
// Recibe como 1er parametro un string, como segundo parametro un entero y como ultimo
// un elemento Html.
//
// Ya para terminar... Con esto no pretendo crear un un control tipo Mootools, IUJquery u otros.
// Creo que este codigo tiene mas fin didactio ya que esta totalmente en castellano.
//
//
//PREFIJOS:
//
//ar=acronimo de array
//b=acronimo de Boolean;
//i= " de integer
//s= " de string
//o= " de objeto
//e=elemento de DOM
//p=procedimiento (en POO llamado metodo)
//f=funcion o float
//frm=formulario
//div=Div
//hid=Hidden
//txt=Text
//
//************************************************** ************
//***********ZONA DE PARAMETROS DE LOS OBJETOS *****************//
//************************************************** ************
////Estas son las propiedades basicas para crear los elementos.
//si quieres las puedes cambiar para ver el efecto que tienen
//
//arDIVFONDO: Son los parametros para el Div de fondo que evitara interaccionar con
//los elementos (controles) que hay detras. Los que programan en .NET es el
//equivalente a la opcion MODAL del formulario.
var arDIVFONDO=new Array();
arDIVFONDO['id']="divFondo";
arDIVFONDO['Alto']="0px";
arDIVFONDO['Ancho']="0px";
arDIVFONDO['ColorFondo']="#000";
arDIVFONDO['Opacidad']=".5";
arDIVFONDO['Filtro']="alpha(opacity=50)";
arDIVFONDO['Posicion']="absolute";
arDIVFONDO['z']="1";
arDIVFONDO['y']="0px";
arDIVFONDO['x']="0px";
arDIVFONDO['Padding']="0px";
//arDIVFORM: Contenedor del formulario ojo con z pq su padre no es el arDIVFONDO
//si fuera asi, todo se veria con opacidad asi que este, esta encima con z=2
var arDIVFORM=new Array();
arDIVFORM['id']="divForm";
arDIVFORM['Alto']="55px";
arDIVFORM['Ancho']="499px";
arDIVFORM['ColorFondo']="white";
arDIVFORM['Opacidad']=".99";
arDIVFORM['Filtro']="alpha(opacity=100)";
arDIVFORM['Posicion']="absolute";
arDIVFORM['z']="2";
arDIVFORM['y']="0px";
arDIVFORM['x']="0px";
arDIVFORM['Padding']="10px";
//arFORM: Los atributos del formulario que ira dentro de divForm
var arFORM=new Array();
arFORM['id']="frmEditar";
arFORM['Nombre']="frmEditar";
arFORM['Metodo']="post";
arFORM['Accion']="contacto.php";
arFORM['Alto']="auto";
arFORM['Ancho']="auto";
arFORM['ColorFondo']="auto";
arFORM['Posicion']="relative";
arFORM['z']="2";
arFORM['y']="0px";
arFORM['x']="0px";
arFORM['Padding']="0";
//arTabla: La tabla que utilizare para ordenar los controles
//se que esto no cumple con W3C Strict, pero si me ponia con fieldset se me
//iba hacer muy largo. 2Filas una la cabecera y otra con los controles
var arTABLA=new Array();
arTABLA['id']="tabDetalles";
arTABLA['Filas']=2;
arTABLA['Columnas']=5;
arTABLA['Alto']="auto";
arTABLA['Ancho']="auto";
arTABLA['ColorFondo']="auto";
arTABLA['Posicion']="relative";
arTABLA['z']="2";
arTABLA['y']="0px";
arTABLA['x']="0px";
arTABLA['Borde']="1px solid red";
//arHIDDEN: Mi campo hidden necesario para enviarlo con POST y capturarlo con
//PHP
var arHIDDEN=new Array();
arHIDDEN['Tipo']="hidden";
arHIDDEN['id']="hidFila";
arHIDDEN['Nombre']="hidFila";
arHIDDEN['Valor']="5"; //Modificar, es el campo clave del registro
//arTXTCONCEP: Campo de texto "CONCEPTO"
var arTXTCONCEP=new Array();
arTXTCONCEP['Tipo']="text";
arTXTCONCEP['id']="txtConcep";
arTXTCONCEP['Nombre']="txtConcep";
arTXTCONCEP['Valor']="Diseño de tarjetas + impresion"; //Modificar
arTXTCONCEP['Ancho']="250px";
//arTXTCONCEP: Campo de texto "CANTIDAD"
var arTXTCANT=new Array();
arTXTCANT['Tipo']="text";
arTXTCANT['id']="txtCant";
arTXTCANT['Nombre']="txtCant";
arTXTCANT['Valor']=" 300,00 "; //Modificar
arTXTCANT['Ancho']="70px";
//arBOTCANCELAR: Sirve para destruir las dos capas y permite seguir interactuando
//con el formulario original
var arBOTCANCELAR=new Array();
arBOTCANCELAR['Tipo']="button";
arBOTCANCELAR['id']="botCancelar";
arBOTCANCELAR['Nombre']="botCancelar";
arBOTCANCELAR['Valor']="Cancelar";
arBOTCANCELAR['Ancho']="auto";
//arSUBACEPTAR: Sirve para enviar la informacion del formulario. (El submit de toda la vida).
var arSUBACEPTAR=new Array();
arSUBACEPTAR['Tipo']="submit";
arSUBACEPTAR['id']="subAceptar";
arSUBACEPTAR['Nombre']="subAceptar";
arSUBACEPTAR['Valor']="Aceptar";
arSUBACEPTAR['Ancho']="auto";
//************************************************** ************
//************** FIN ZONA DE PARAMETROS ********************//
//************************************************** ************
//--- AQUI EMPIEZA LO BUENO -- //
//VARIABLES "GLOBALES" (por lo de la G ;0)
var oGVentana=null; //Pq "o"? pq esta clase no gestiona ningun elemento DOM
var eGDivFondo=null;
var eGDivForm=null;
var eGFormulario=null;
var eGTabla=null;
var eGHidFila=null;
var eGTxtConcep=null;
var eGTxtCant=null;
var eGbotCancelar=null;
var eGSubAceptar=null;
var bGFrmCreado=false;
//CLASE VENTANA
function CVentana()
{
var iAltura = 0; // height
var iAnchura = 0; // width
var pCalculaTamano=function()
{
if( typeof( window.innerHeight ) == 'number' )
{
iAltura = window.innerHeight;
iAnchura = window.innerWidth;
}
else if( document.body && document.body.clientHeight )
{
//IE 4 o superior
iAltura = document.body.clientHeight;
iAnchura = document.body.clientWidth;
}
}
pCalculaTamano();
this.iAncho=iAnchura;
this.iAlto=iAltura;
this.getAncho=function()
{
return this.iAncho+"px";
}
this.getAlto=function()
{
return this.iAlto+"px";
}
}
//CLASE FONDO
//sIdPadre es el ID del div donde se insertara este, si se pasa null el padre
//sera document.body
function CDiv(arDiv, sIdPadre)
{
var ePadre=document.body;
this.eDiv=document.createElement('div');
with(this.eDiv)
{
id=arDiv['id'];
style.height=arDiv['Alto'];
style.width=arDiv['Ancho'];
style.backgroundColor=arDiv['ColorFondo'];
style.opacity=arDiv['Opacidad'];
style.filter=arDiv['Filtro'];//PARA IE
style.position=arDiv['Posicion'];
style.zIndex=arDiv['z'];
style.top=arDiv['y'];
style.left=arDiv['x'];
style.padding=arDiv['Padding'];
}
if(sIdPadre==null)
{
ePadre.appendChild(this.eDiv);
}
else
{
ePadre=document.getElementById(sIdPadre);
ePadre.appendChild(this.eDiv);
}
//GETS
this.getID=function()
{
return this.eDiv.id;
}
this.getWidth=function()
{
return this.eDiv.offsetWidth;
}
this.getHeight=function()
{
return this.eDiv.offsetHeight;
}
this.getTop=function()
{
return this.eDiv.offsetTop;
}
this.getLeft=function()
{
return this.eDiv.offsetLeft;
}
//SETS
this.setWidth=function(sValor)
{
this.eDiv.style.width=sValor;
}
this.setHeight=function(sValor)
{
this.eDiv.style.height=sValor;
}
this.setTop=function(sValor)
{
this.eDiv.style.top=sValor;
}
this.setLeft=function(sValor)
{
this.eDiv.style.left=sValor;
}
}
SIGUE...