Foros del Web » Programando para Internet » Javascript »

Ayuda con javascript y CSS, ventana modal.

Estas en el tema de Ayuda con javascript y CSS, ventana modal. en el foro de Javascript en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 19/02/2008, 01:42
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 18 años, 2 meses
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
  #2 (permalink)  
Antiguo 19/02/2008, 01:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Ayuda con javascript y CSS, ventana modal.

Hola:

Solo hay 3 ventanas modales: alert, confirm y prompt... las que mencionas, aunque le pongan nombres como "modalbox" NO son modales, tan solo las pueden simular, y sería muy difícil simular el comportamiento (creo que imposible)... y las verdaderas ventanas modales tienen el aspecto según el navegador y sistema... y no se pueden modificar... pero si te vale simularla, tú mismo has puesto ejemplos.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 19/02/2008, 02:26
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 18 años, 2 meses
Puntos: 5
Re: Ayuda con javascript y CSS, ventana modal.

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

Solo hay 3 ventanas modales: alert, confirm y prompt... las que mencionas, aunque le pongan nombres como "modalbox" NO son modales, tan solo las pueden simular, y sería muy difícil simular el comportamiento (creo que imposible)... y las verdaderas ventanas modales tienen el aspecto según el navegador y sistema... y no se pueden modificar... pero si te vale simularla, tú mismo has puesto ejemplos.

Saludos
Gracias caricatos, buscare informacion sobre las ventanas alert, confirm y prompt, pero lo que yo necesito es que al entrar en mi sitio aparezca una venta como esta.

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
Con un mensaje de advertencia por ejemplo ( Entrada proivida a menores de 18 años bla bla bla......)
Y un boton Si acepto, no acepto
Creo que no me explico bien,
  #4 (permalink)  
Antiguo 21/02/2008, 10:07
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 18 años, 2 meses
Puntos: 5
Re: Ayuda con javascript y CSS, ventana modal.

Nadie que pueda hecharme un cable...?

S.O.S.
  #5 (permalink)  
Antiguo 21/02/2008, 10:15
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Re: Ayuda con javascript y CSS, ventana modal.

Sucede que si no tenés conocimientos de javascript o tiempo para aprender, tendrás que recurrir a algo prefabricado como esto: http://www.wildbit.com/labs/modalbox/
PD: el último ejemplo es el que mejor puede ayudarte.
  #6 (permalink)  
Antiguo 27/05/2012, 14:09
 
Fecha de Ingreso: mayo-2010
Mensajes: 2
Antigüedad: 14 años
Puntos: 0
Respuesta: Re: Ayuda con javascript y CSS, ventana modal.

Cita:
Iniciado por xiscomax Ver Mensaje
Gracias caricatos, buscare informacion sobre las ventanas alert, confirm y prompt, pero lo que yo necesito es que al entrar en mi sitio aparezca una venta como esta.

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
Con un mensaje de advertencia por ejemplo ( Entrada proivida a menores de 18 años bla bla bla......)
Y un boton Si acepto, no acepto
Creo que no me explico bien,


,................................................. ........................


AYUDE RESPECTO DE ESTE CODIGO DE ARRIBA...

YO DESEO ABRIR DIFERENTES LIGHTBOXES EN UN MISMO HTML, PERO NO SE DONDE DEBERIA LINKEAR" EL CODIGO PARA ABRIR CADA UNO DE ELLOS, LOS CUALES ESTAN CONTENIDOS EN UN DIV QUE TIENE UN ID, POR EJ..

TENGO UN DIV ASI:


<div id="Precios_Rosen1" class="white_content">

<TABLE> ACA EL CONTENIDO BLA BLA
</TABLE>

aqui el boton para cerrar....

<div class="Texto_Rojo_dest" align="right" style="margin-right:30px;">
<a href = "javascript:void(0)" class="Texto_Blanco" onclick = "document.getElementById('Precios_Rosen1').style.d isplay='none';
document.getElementById('fade').style.display='non e'">Cerrar</a>
</div>
</div>
<div id="fade" class="black_overlay"></div>



los elementos tienen ID, pero no me funcionan, me abre siempre el mismo div..


este responde a:


<!-- boton_descargaLightbox1-->

<a href="javascript:void()"onclick = "document.getElementById('Precios_Rosen1').style.d isplay='block';document.getElementById('fade').sty le.display='block'">boton precios</a>

(este sera el boton colocado para que se abra el lightbox 1.)

ahora necesito saber como le pongo al div que contiene la otra ventana de precios....

como para que al linkearlo me abra el segundo lightbox..

se entiende mi problema?
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 04:10.