Tema: Ocultar Div y enlaces que lo llaman
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 13/02/2013, 22:15
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Ocultar Div y enlaces que lo llaman
a mi me funciona
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <script type="text/javascript">
  9. function showLightbox() {
  10.     document.getElementById('over').style.display='block';
  11.     document.getElementById('fade').style.display='block';
  12.     document.getElementById('mas').style.display='none';
  13.  
  14. }
  15. function hideLightbox() {
  16.     document.getElementById('over').style.display='none';
  17.     document.getElementById('fade').style.display='none';
  18.     document.getElementById('mas').style.display='block';
  19. }   
  20.  
  21. </script>
  22. <style>.fadebox {
  23.     display: none;
  24.     position: absolute;
  25.     top: 0%;
  26.     left: 0%;
  27.     width: 100%;
  28.     height: 100%;
  29.     background-color: #000;
  30.     z-index:1001;
  31.     -moz-opacity: 0.8;
  32.     opacity:.80;
  33.     filter: alpha(opacity=80);
  34. }
  35. .overbox {
  36.     display: none;
  37.     /*position: absolute;
  38.     top: 25%;
  39.     left: 25%;
  40.     width: 50%;
  41.     height: 50%;*/
  42.     z-index:1002;
  43.     
  44. }
  45. .leerover{display:block;}
  46. #mas a{
  47.     
  48.     color:#EE8E22;
  49.     background-repeat:no-repeat;
  50.     height:20px;
  51.     width:80px;
  52.     float:left;
  53.     font-size:11px;
  54.     line-height:20px;
  55.     text-align:center;
  56.     margin-top:10px;
  57.     margin-bottom: 10px;
  58.     }
  59. #mas a:hover{
  60.     color: #D3620E;
  61.     background-repeat: no-repeat;
  62.     height: 20px;
  63.     width: 80px;
  64.     float: left;
  65.     line-height: 20px;
  66.     text-align: center;
  67.     margin-top: 10px;
  68.     font-size: 11px;
  69.     margin-bottom: 10px;
  70.     }
  71. #box {
  72.     background: #FFFFFF;
  73.     padding: -10px;
  74.     text-align: justify;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div id="mas" class="leerover"><a href="javascript:showLightbox();">Ver Más...</a></div>
  80.           <div id="over" class="overbox">
  81.          <div id="box"><a href="javascript:hideLightbox();">cerrar</a>
  82. <p>Hemos trabajado en 16 Países Latinoamericanos así como en la Unión Europea.</p></div>
  83. </body>
  84. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.