Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] Como mostrar datos en un popup

Estas en el tema de Como mostrar datos en un popup en el foro de PHP en Foros del Web. Buenas foro Tengo una pregunta como puedo mostrar el detalle de un producto en un popup hecho con css alguien sabe como hacerlo les agradeceria ...
  #1 (permalink)  
Antiguo 11/03/2013, 17:04
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 5 años, 4 meses
Puntos: 12
Pregunta Como mostrar datos en un popup

Buenas foro

Tengo una pregunta como puedo mostrar el detalle de un producto en un popup hecho con css alguien sabe como hacerlo les agradeceria muchisimo.

De antemano muchas gracias
__________________
Lo imposible solo cuesta un poco mas
  #2 (permalink)  
Antiguo 12/03/2013, 03:18
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.895
Antigüedad: 9 años, 8 meses
Puntos: 573
Respuesta: Como mostrar datos en un popup

Cita:
...un popup hecho con css...
Si es un div, puedes mostrar datos igual que fuera un div de la estructura del documento...

Explica como has hecho el popup y te podremos orientar. Depende de como este hecho quizas la solución es mas de javascript que de php.
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #3 (permalink)  
Antiguo 12/03/2013, 09:43
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 5 años, 4 meses
Puntos: 12
Respuesta: Como mostrar datos en un popup

El popup lo hago de la siguiente manera:

Código CSS:
Ver original
  1. <style>
  2.  
  3. #divBackground{
  4. visibility:hidden;
  5. position:fixed;
  6. left:0;
  7. top:0;
  8. width:100%;
  9. height:100%;
  10. display:none;
  11. background-color:#000;
  12. filter:alpha(opacity=60);
  13. -moz-opacity:.6;
  14. opacity:.6;
  15. z-index:9;
  16. }
  17.  
  18. #divPopup{
  19. position:fixed;
  20. top:50%;
  21. left:50%;
  22. margin-top:-81px;/* half of the height plus a little to the top */
  23. margin-left:-150px;/* half of the width */
  24. visibility:hidden;
  25. display:none;
  26. border:1px solid #000;
  27. background-color:#FFF;
  28. color:#333;
  29. padding:0;
  30. height:300px;
  31. width:350px;
  32. z-index:10;
  33. font-size:12px;
  34. }
  35.  
  36. #divPopupHead{
  37. position:absolute;
  38. top:0;
  39. left:0;
  40. width:100%;
  41. background-color:#2B60DE;
  42. color:#fff;
  43. font-weight:bold;
  44. padding:2px0;
  45. z-index:-1;
  46. }
  47.  
  48. #divClosePopup{
  49. float:right;
  50. text-align:right;
  51. cursor:pointer;
  52. padding-right:10px;
  53. }
  54.  
  55. #divClosePopupa{
  56. text-decoration:none;
  57. color:#333;
  58. }
  59.  
  60. #divClosePopupa:hover{
  61. color:#FF0000;
  62. }
  63.  
  64. #divPopupContent{
  65. clear:both;
  66. padding:10px;
  67. }
  68. </style>

el javascript:
Código Javascript:
Ver original
  1. <script language="javascript"type="text/javascript">
  2.  
  3. function showPopup(){
  4. //Showpopup
  5. document.getElementById('divBackground').style.visibility='visible';
  6. document.getElementById('divPopup').style.visibility='visible';
  7. document.getElementById('divBackground').style.display='block';
  8. document.getElementById('divPopup').style.display='block';
  9. }
  10.  
  11. function hidePopup() {
  12. //Hidepopup
  13. document.getElementById('divBackground').style.visibility='hidden';
  14. document.getElementById('divPopup').style.visibility='hidden';
  15. document.getElementById('divBackground').style.display='none';
  16. document.getElementById('divPopup').style.display='none';
  17. }
  18.  
  19. </script>

Código HTML:
Ver original
  1. <div id='divBackground'></div>
  2.   <div id='divPopup'>
  3.     <div id='divPopupHead'>titulo</div>
  4.     <div id='divClosePopup'onclick='hidePopup()'><a href='#'>X</a></div>
  5.     <div id='divPopupContent'>
  6.         contenido
  7.     </div>
  8.   </div>
  9. <a href='javascript:showPopup();'>Ver detalle</a>
  10. </body>
__________________
Lo imposible solo cuesta un poco mas

Última edición por jandrogdz; 12/03/2013 a las 09:52
  #4 (permalink)  
Antiguo 12/03/2013, 10:07
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 5 años, 4 meses
Puntos: 12
Respuesta: Como mostrar datos en un popup

Al parecer he logrado mandar una variable a en método GET pero el popup solo aparece y desaparece en menos de un segundo alguien me puede apoyar a dejarlo visible.

Código PHP:
Ver original
  1. <body>
  2. <a href="?var=dato" onclick='javascript:showPopup();'>Ver detalle</a>
  3. <div id='divBackground'></div>
  4.   <div id='divPopup'>
  5.     <div id='divPopupHead'>titulo</div>
  6.     <div id='divClosePopup'onclick='hidePopup()'><a href='#'>X</a></div>
  7.     <div id='divPopupContent'>
  8.         contenido<br />
  9.         <?php
  10.         echo "Se recibe la variable por get: ".@$_GET['var']." <br />";
  11.         ?>
  12.     </div>
  13.   </div>
  14. </body>
__________________
Lo imposible solo cuesta un poco mas
  #5 (permalink)  
Antiguo 12/03/2013, 10:25
Avatar de informacionsys  
Fecha de Ingreso: mayo-2011
Ubicación: Bogota D.C
Mensajes: 793
Antigüedad: 6 años, 6 meses
Puntos: 76
Respuesta: Como mostrar datos en un popup

podrias validar que si la variable var contiene algo ejecute la funcion showPopup();

Código PHP:
Ver original
  1. if(!empty($_GET['var']))
  2. {
  3.   echo '<script>showPopup()</script>';
  4.    echo "Se recibe la variable por get: ".@$_GET['var']." <br />";
  5. }
  #6 (permalink)  
Antiguo 12/03/2013, 12:24
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 5 años, 4 meses
Puntos: 12
Respuesta: Como mostrar datos en un popup

Excelente informacionsys es justo lo que necesitaba te lo agradezco bastante.
__________________
Lo imposible solo cuesta un poco mas

Etiquetas: popup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:00.