Tema: Ocultar Div y enlaces que lo llaman
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 14/02/2013, 10:31
Avatar de Reedyseth
Reedyseth
 
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 16 años
Puntos: 36
Información Respuesta: Ocultar Div y enlaces que lo llaman
Del codigo que tienes originalmente y que es el que pegaste primero veo dos cosas;
  1. Tienes comentado algunos atributos de la clase 'overbox.
  2. Al div con el id 'over' le falta el tag </div> que lo cierra.

    Tambien:
  3. En el css tienes una clase llamada 'fadebox' que no la estas usando y esta es la que pone el fondo en negro. Para esto le agregue ese div que faltaba y lo puse antes que el div con id 'mas'
  4. Por estandarizacion no le estas asignado el atributo type en el style del css 'type="text/css"'
  5. En tu javascript estas buscando un id que se llama 'fade' el cual no existe en tu Dom.
  6. La clase overbox en el css le falta tener un atributo de fondo 'background-color> #ffffff' para que la puedas visualizar completamente, si no solo queda el fondo blanco de tu texto.


A continuacion te pego el codigo con las correciones pertinentes, es muy importante que lo veas y compares con el que tenias
anteriormente para que puedas analalizar bien tus errores, saludos y por favor da el tema como solucionado.

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <meta name="author" content="reedyseth"/>
  5.         <meta name="myBlog" content="www.behstant.com/blog"
  6.         <title>Empty</title>
  7.         <script type="text/javascript">
  8.             function showLightbox() {
  9.                 document.getElementById('over').style.display = 'block';                
  10.                 document.getElementById('mas').style.display = 'none';
  11.                 // codigo agregado
  12.                 document.getElementById('fadebox').style.display = 'block';
  13.             }
  14.  
  15.             function hideLightbox() {
  16.                 document.getElementById('over').style.display = 'none';
  17.                 document.getElementById('mas').style.display = 'block';             
  18.                 // codigo agregado
  19.                 document.getElementById('fadebox').style.display = 'none';
  20.             }
  21.  
  22.         </script>
  23.         <style type="text/css">          
  24.             #fadebox {
  25.                 display: none;
  26.                 position: absolute;
  27.                 top: 0%;
  28.                 left: 0%;
  29.                 width: 100%;
  30.                 height: 100%;
  31.                 background-color: #000;
  32.                 z-index: 1001;
  33.                 -moz-opacity: 0.8;
  34.                 opacity: .80;
  35.                 filter: alpha(opacity=80);
  36.             }
  37.             .overbox {
  38.                 display: none;
  39.                 position: absolute;
  40.                 top: 25%;
  41.                 left: 25%;
  42.                 width: 50%;
  43.                 height: 50%;
  44.                 z-index: 1002;
  45.                 background-color: #ffffff;
  46.             }
  47.             .leerover {
  48.                 display: block;
  49.             }
  50.             #mas a {
  51.  
  52.                 color: #EE8E22;
  53.                 background-repeat: no-repeat;
  54.                 height: 20px;
  55.                 width: 80px;
  56.                 float: left;
  57.                 font-size: 11px;
  58.                 line-height: 20px;
  59.                 text-align: center;
  60.                 margin-top: 10px;
  61.                 margin-bottom: 10px;
  62.             }
  63.             #mas a:hover {
  64.                 color: #D3620E;
  65.                 background-repeat: no-repeat;
  66.                 height: 20px;
  67.                 width: 80px;
  68.                 float: left;
  69.                 line-height: 20px;
  70.                 text-align: center;
  71.                 margin-top: 10px;
  72.                 font-size: 11px;
  73.                 margin-bottom: 10px;
  74.             }
  75.             #box {
  76.                 background: #FFFFFF;
  77.                 padding: -10px;
  78.                 text-align: justify;
  79.             }
  80.         </style>
  81.     </head>
  82.     <body>  
  83.         <div id="fadebox"></div>
  84.         <div id="mas" class="leerover">
  85.             <a href="javascript:showLightbox();">Ver Más...</a>
  86.         </div>
  87.         <div id="over" class="overbox">
  88.             <div id="box">
  89.                 <a style="float:right" href="javascript:hideLightbox();"><img src="images/close.gif" width="14" height="14"></a>
  90.                 <p>
  91.                     Hemos trabajado en 16 Países Latinoamericanos así como en la Unión Europea.
  92.                 </p>
  93.             </div>
  94.         </div>
  95.     </body>
  96. </html>

Reedyseth
http://behstant.com/blog