Tema: Como mostrar datos en un popup
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 12/03/2013, 08:43
Avatar de jandrogdz
jandrogdz
 
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 397
Antigüedad: 12 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. <body>
  2. <div id='divBackground'></div>
  3.   <div id='divPopup'>
  4.     <div id='divPopupHead'>titulo</div>
  5.     <div id='divClosePopup'onclick='hidePopup()'><a href='#'>X</a></div>
  6.     <div id='divPopupContent'>
  7.         contenido
  8.     </div>
  9.   </div>
  10. <a href='javascript:showPopup();'>Ver detalle</a>
  11. </body>
__________________
Lo imposible solo cuesta un poco mas
Última edición por jandrogdz; 12/03/2013 a las 08:52