Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/02/2008, 01:42
Avatar de xiscomax
xiscomax
 
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 19 años, 1 mes
Puntos: 5
Ayuda con javascript y CSS, ventana modal.

Hola gente bueno no se si es el apartado mas correcto, para exponer mi consulta,
decir antes de nada que no tengo conocimientos en javascript.

Tengo una pagina con contenido no apto para todo el publico, y me gustaría añadir un mensaje de advertencia en el header de mi template, para que aparezca cuando alguien entre por primera vez.

Eh encontrado este codigo javascript el cual parece funcionar a la perfección.

Código PHP:
<script type="text/javascript">
            function 
getAdultCookie(name) {
    var 
arg name "=";
    var 
alen arg.length;
    var 
clen document.cookie.length;
    var 
0;
    while (
clen) {
    var 
alen;
    if (
document.cookie.substring(ij) == arg)
    return 
getAdultCookieVal (j);
    
document.cookie.indexOf(" "i) + 1;
    if (
== 0) break;
    }
    return 
null;
}

function 
setAdultCookie(namevalue) {
    var 
argv setAdultCookie.arguments;
    var 
argc setAdultCookie.arguments.length;
    var 
expires = (argc 2) ? argv[2] : null;
    var 
path = (argc 3) ? argv[3] : null;
    var 
domain = (argc 4) ? argv[4] : null;
    var 
secure = (argc 5) ? argv[5] : false;
    
document.cookie name "=" escape (value) +
    ((
expires == null) ? "" : ("; expires=" expires.toGMTString())) +
    ((
path == null) ? "" : ("; path=" path)) + 
    ((
domain == null) ? "" : ("; domain=" domain)) +
    ((
secure == true) ? "; secure" "");
}

function 
getAdultCookieVal (offset) {
    var 
endstr document.cookie.indexOf (";"offset);
    if (
endstr == -1)
    
endstr document.cookie.length;
    return 
unescape(document.cookie.substring(offsetendstr));
}


if (
getAdultCookie('CookieAdultAlert') != 'true') {
    if ( ! 
confirm("Advertencia... Este sitio web es para personas mayores de 18 años.             \nSi presionan el botón \"OK\" están aceptando:\n\n     - Ser mayor de edad y estar consciente del contenido erótico y pornográfico de este sitio web.\n\n     - Asegurar no darlo a conocer a menores de edad asÃ* como prevenir que los menores\n       vean este sitio web desde su ordenador.\n\n     - Este sitio es para uso personal solamente y no implica ningún organismo de estado.")) {
        
window.location.href "http://www.canal-onanismo.org";
    }
    else {
        
setAdultCookie('CookieAdultAlert''true');
    }
}


</script> 
Pero el resultado final no me termina de gustar, tenia pensado crear una ventana modal al puro estilo (lightbox, thickbox, greybox, modalbox… son todas ventanas modales) que crean un fondo semi-transparente que cubre la página entera.

El código de la ventana modal de este estilo es este.

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <
html>
       <
head>  
              <
title>LIGHTBOX EXAMPLE</title>  
              <
style>   
              .
black_overlay{   
                  
displaynone;   
                  
positionabsolute;  
                  
top0%;  
                  
left0%;  
                  
width100%;  
                  
height100%;  
                  
background-colorblack;  
                  
z-index:1001
                  -
moz-opacity0.8;  
                  
opacity:.80
                  
filteralpha(opacity=80);  
              } 
              .
white_content 
                  
displaynone
                  
positionabsolute;
                  
top25%; 
                  
left25%;
                  
width50%;
                  
height50%; 
                  
padding16px;
                  
border16px solid orange;
                  
background-colorwhite
                  
z-index:1002
                  
overflowauto
              }  
          </
style>  
          </
head>
          <
body>
              <
p>This is the main contentTo display a lightbox click <a href "javascript:void(0)" onclick "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
              <
div id="light" class="white_content">This is the lightbox content. <a href "javascript:void(0)" onclick "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
              <
div id="fade" class="black_overlay"></div>
          </
body>
      </
html
Ahora viene mi problema por el cual pido ayuda, seria posible crear el primer script pero con ventana modal en CSS como el segundo ejemplo?

Espero puedan ayudarme, se lo tendría muy agradecido.

Salu2