Canales populares
  1. Entretenimiento
  2. »
  3. Taringa!
  4. »
  5. Info

Ventanas modales con variables PHP



Amigo taringuero le ha pasado alguna vez como desarrollador de paginas web que si bien ya muchos que ya sabemos que es una ventana modal ha intentado pasar una variable por url de PHP justamente en el enlace o url que genera una ventana modal y no pudo o no ha podido saber como carajos se hace ?

Para los que no saben que es una ventana modal la pueden ver en la foto de arriba es una ventana que sobre sale el resto del contenido de la pagina web aprovechando los espacios la pagina.

Puedes crear una formulario sobre ella y los datos que ingreses los recibiras con php sin problemas pero el problema es intente pasar una variable php sobre el enlace que genera la ventana modal, no pudes, es un gallo, por que ?, porque ese enlace tiene el codigo javascript que no retorna datos justamente para que quede visible la ventana modal.

Pues bien amigos, yo les traigo la solución pues como fanático al desarrollo me puse en la tarea de investigar hubo momentos de tristeza pero hoy lo logre como dicen es cuestión de tiempo.

En internet no esta la solución y nadie explica como se hace, generalmente los programadores que saben trucos importantes no los comparten, y los que creen que se la saben todas proponen soluciones en foros sin antes probar si en verdad sirve solo es idea.

Pues yo les traigo la solución, vi que en facebook actualmente usan este sistema que les explicare y durante un tiempo en mercadolibre lo hicieron.

Yo me puse en la tarea desde hace unos años descubrir como se hace una red social, hoy justamente logre hacer varias cosas entre estas el sistema de amigos en comun y justamente vi que facebook genera una ventana modal para listar los amigos en comun entonces me puse en la tarea de hacerlo y logre hacer la ventana modal y quede varado para pasar por esa misma url el id o variable PHP que contiene el id del usuario al que pinche o di click para ver sus amigos en comun conmigo dentro de la ventana modal desplegando la lista.

Me puse a mirar el codigo de facebook justo el enlace que genera la ventana modal con el navegador mozilla que por cierto es la mejor herramienta para programadores aunque en el navegador chrome lo que destaco es la herramienta que trae incluido para simular diseño adaptativo,

Y como les parece no trae el metodo onclick de javascript quizas porque estaran manejando otras herramientas pero ese no es el problema el problema era que no se veia como facebook pasaba la variable php entonces descubri la solucion.

primero que todo les mostrare el enlace al que me refiero y luego como es la ventana modal de la cual les hablo.

El enlace que les digo es el que esta dentro del circulo rojo, al dar click sobre el genera la ventana modal:



si dejo el mouse quieto sobre el enlace sin dar click sale el tooltip que muestra una parte de la lista de amigos en comun.




Ahora si doy click sobre ese enlace se abre esta ventana modal que muestra los amigos que tenemos en comun.




Esa ventana modal es la que sobre sale en toda la pagina con fondo negro y la ventana pequeña en el centro mostrando la lista de amigos en comun y para que se pueda mostrar la lista de amigos se necesita el id del usuario al que se dio click.

A lo que vinimos => la solucion

La solucion radica en aprender a manejar el atributo de html llamado data- que lleva un guion que sirve para guadar informacion puedes ponerle al atributo el nombre que quieras despues del guion en ejemplo data-camara etc....


PASO 1 :

Lean este articulo sobre el atributo data-

http://www.htmlcinco.com/atributos-data/

PASO 2:

Aho como nos indican en el articulo, para nosotros lo mejor es acceder a dichos metadatos con javascript puro (sin frameworks como jQuery o Prototype), podemos hacerlo utilizando la API Dataset, de la siguiente manera:

var camara = document.getElementById('miImagen').dataset.camara;

La variable “camara” contendrá el valor del atributo “data-camara” que tenga el elemento con id “miImagen”.

PASO 3:

crearemos la ventana modal.

0. instalaran xampp o wamp server para probar el proyecto todos los desarrolladores los usamos porque es un servidor local y luego sino saben que editor usar les aconsejo que usen el mejor de todos que es gratis y es APTANA no el plugin para eclipse sino directamente el editor propio y luego crean un proyecto en el cual haran esto.


1. crear un archivo llamado index.php en el cual pegaran el siguiente texto.






Document




echo "Diana";


?>








2. vamos a crear un archivo llamado amigosencomun.php en el cual pegaran el siguiente texto.






Document







$amiguito = @$_GET['id'];
?>

Mi ventana modal


0No hay comentarios