Foros del Web » Creando para Internet » CSS »

Ventana Emergente con CSS

Estas en el tema de Ventana Emergente con CSS en el foro de CSS en Foros del Web. Saludos a todos este es mi primer post en este foro, tratare de ser lo mas detallado posible . En mi pagina tengo una ventana ...
  #1 (permalink)  
Antiguo 26/04/2011, 12:36
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Ventana Emergente con CSS

Saludos a todos este es mi primer post en este foro, tratare de ser lo mas detallado posible .

En mi pagina tengo una ventana emergente que trabaja con esta clase popup.css

Código PHP:
#pop1 { 
   
z-index:500
   
position:absolute
   
border1px solid #33CCFF; 
   
text-align:center
   
background:#FFFFCC;/*#33CCFF; */
   
border:solid 1px #000000;

y la llamo desde el index de la pagina principal de esta forma haciendo una consulta a la BD para obtener la ruta de las imagenes que he guardado y ponerlas en las ventanas emergentes
Código PHP:
$i=1;
    while(
$datosVentana mysql_fetch_assoc($rsventana))
    { 
        echo 
"<div id='pop$i' align='center' >";
        echo 
"<div id='cerrar$i' align='center'>[CERRAR]</div> ";
        
        if(
trim($datosVentana["enlace_ven"]<>"")){
            echo 
"<a href='".$datosVentana["enlace_ven"]."' target='".$datosVentana["target_ven"]."'><img src='../imagenes/vemergente/".$datosVentana["imagen_ven"]."' border='0' align='center'></a>  </div>";
        }else{
            echo 
"<img src='../imagenes/vemergente/".$datosVentana["imagen_ven"]."' border='0' align='center'>  </div>";    
        }
        
$i=$i+1;
    } 
Trabaja perfecto, cuando se abre la pagina sale la ventana emergente en el centro de forma estatica y cuando bajo por la pagina la ventana se queda en el lugar inicial donde salió.

MI pregunta es, Que debo modificar para que esta ventana emergente baje o suba mientras yo baje o suba por la pagina. como ejemplo de lo que quiero se muestra la pagina a continuacion.

http://www.munitacna.gob.pe/mpt07/

saludos y por favor una ayudita
  #2 (permalink)  
Antiguo 26/04/2011, 13:43
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ventana Emergente con CSS

Hola mercury. dale distancias con porcentajes.
ejemplo:

#pop1 {
...
width:...;
height:...;
top:40%;
left:...%;
}


Saludos.
  #3 (permalink)  
Antiguo 26/04/2011, 13:59
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Ventana Emergente con CSS

Hice la modificacion que me aconsejaste al archivo popup.css
pero no encuentro el resultado que esperaba ya que la ventana emergente sigue en la misma posicion inicial a apesar que baje o suba por la pagina.

Código PHP:
#pop1 { 
   
z-index:500
   
position:absolute
   
top:40%;
   
left:40%;
   
border1px solid #E3E0C4; 
   
text-align:center
   
background:#0796de;
   
border:solid 1px #000000;

saludos algun otro consejo
  #4 (permalink)  
Antiguo 26/04/2011, 14:08
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ventana Emergente con CSS

usa position: fixed
  #5 (permalink)  
Antiguo 26/04/2011, 14:11
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ventana Emergente con CSS

pues un div es una caja de bloque, y como tal toma el 100% del ancho. a tu código debes añadir un width y un height en lo posible en pixeles tal como te mostré en el ejemplo anterior.

Tal vez sea mejor que uses position fixed, como indica isabel, teniendo en cuenta que no sabemos que anidamiento tienes en la página.

Abrazo.
  #6 (permalink)  
Antiguo 26/04/2011, 14:31
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Ventana Emergente con CSS

Gracias IsaBelM y cristian_cena por sus sugerencias. en realidad si funciono las modificaciones que me aconsejaron. y el pupup.css quedo de la siguiente forma:

Código PHP:
#pop1 { 
   
z-index:500
   
position:fixed
   
top:40%;
   
border1px solid #33CCFF; 
   
text-align:center
   
background:#FFFFCC;
   
border:solid 1px #000000;

Pero hay un inconveniente y no se si soy muy exquisito pero la idea era que la ventana emergente tenga el efecto que tiene esta pagina:

http://www.munitacna.gob.pe/mpt07/

En pocas palabras que al momento de navegar por la pagina de arriba hacia abajo, que la ventana emergente tenga un tiempo de demora antes de bajar o subir tal como esta en esta pagina [URL="http://www.munitacna.gob.pe/mpt07/"]http://www.munitacna.gob.pe/mpt07/[/URL] ya que la solucion que me brindaron hace que la pagina me siga de forma inmediata apenas baje o suba.
no se si existe una propiedad delay o algo asi.

Me gustaria escuchar sus opiniones, pero de antemano les agradezco la amabilidad de responder a mi consulta.
  #7 (permalink)  
Antiguo 26/04/2011, 14:53
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ventana Emergente con CSS

eso es javascript prueba con este. para conseguir un delay mayor has de editar el temporizador setTimeout()
  #8 (permalink)  
Antiguo 26/04/2011, 15:30
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ventana Emergente con CSS

ponle el maldito width (jaja es broma)

y si, ya te han dicho que uses javascript.

yo uso javascript pero con jquery, te lo recomiendo, ya que si usas su método animate() te será muy facil lograr lo que necesitas.

Bastará con que des position fixed y valores iniciales para top y left en el css (ya lo tenes hecho 40% para left y top). Valores que reemplazas luego dentro de animate() seguramente por 0%.

Saludos.
  #9 (permalink)  
Antiguo 26/04/2011, 17:21
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Exclamación Respuesta: Ventana Emergente con CSS

Disculpen la ignorancia pero lo que entendi de ambos es que mi popup.css esta bien.

Código PHP:
#pop1 { 
   
z-index:500
   
position:fixed
   
top:40%;
   
left:40%;
   
border1px solid #E3E0C4; 
   
text-align:center
   
background:#0796de;
   
border:solid 1px #000000;

Y para solucionar el problema tendria que modificar la pagina donde llamo al popup, en mi caso es el index.php. el cual paso a detallarles

el head tiene las librerías de jQuery

Código PHP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<? include("../includes/head.php"); ?>
<script language="javascript" type="text/javascript" src="../js/popup.js.php"></script>
<link href="../estilos/popup.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    $('#CustomSlideshow').slideshow({
    playframe:false,
    effect:'Left'
    }).playSlide();
});
//]]>
</script>

</head>
Ahora esta es la parte donde llamo al div (obviamente dentro del index.php) al final de la pagina antes del </body>

Código PHP:
<?  
    $rsventana
=fncIdCategoria();
    if(
$rsventana<>"0") {
    
/*echo "<script language=\"javascript\" type=\"text/javascript\" src=\"../js/popup.js.php\"></script>";*/
    
$i=1;
    while(
$datosVentana mysql_fetch_assoc($rsventana))
    { 
        echo 
"<div id='pop$i'>";
        echo 
"<div id='cerrar$i' align='right'>[CERRAR]</div> ";
        if(
trim($datosVentana["enlace_ven"]<>"")){
            echo 
"<a href='".$datosVentana["enlace_ven"]."' target='".$datosVentana["target_ven"]."'><img src='../imagenes/vemergente/".$datosVentana["imagen_ven"]."' border='0'></a>  </div>";
        }else{
            echo 
"<img src='../imagenes/vemergente/".$datosVentana["imagen_ven"]."' border='0'>  </div>";    
        }
        
$i=$i+1;
    }
 } 
?>

Ahora realmente me seria de mucha utilidad si pondrian las instrucciones que me aconsejaron dentro del codigo brindado ( o aunque sea algunas pautas de donde deben ir) (recuerden que no soy experto en esto, todo lo que se es producto de foros pero no profundice)

IsaBelM me aconsejo poner ese scrip al ultimo, lo puse pero no me funciono, solo me mostro el menu en la parte inferior pero sin movimiento.

cristian_cena me aconsejaste utilizar el metodo animate() pero no se realmente como funciona ni en que parte del codigo exactamente aplicarlo. pero me parece interesante la idea pero donde aplico en la css o en el index.

disculpen la molestia pero es que no me sale de acuerdo a lo que necesito.
para muestra les dejo mi pagina.

http://www.munidepocollay.gob.pe/principal/index.php

saludos y gracias por ayudar de antemano
  #10 (permalink)  
Antiguo 26/04/2011, 17:36
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ventana Emergente con CSS

Bueno, veo que estas usando jquery.

Prueba con este css:

#pop1 {
z-index:999;
position:fixed;
top:40%;
left:40%;
border: 1px solid #E3E0C4;
text-align:center;
background:#0796de;
border:solid 1px #000000;
width: ... ; /*poné esto se buena persona*/
height: ... ; /*poné esto se buena persona*/
}

y debajo de tu php donde generas el div: ...

<?php
... tu codigo lo dejas igual ...
?>

<script type="text/javascript">
$("#pop1 ").animate({"top": "-=40%"}, "slow");
</script>

ya dirás, un abrazo.
  #11 (permalink)  
Antiguo 26/04/2011, 17:50
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Ventana Emergente con CSS

Hice lo que me aconsejaste compañero y te lo muestro aca:
Código PHP:
<?  
    $rsventana
=fncIdCategoria();
    if(
$rsventana<>"0") {
    
/*echo "<script language=\"javascript\" type=\"text/javascript\" src=\"../js/popup.js.php\"></script>";*/
    
$i=1;
    while(
$datosVentana mysql_fetch_assoc($rsventana))
    { 
        echo 
"<div id='pop$i' align='center' style='background-color:#0796de' >";
        echo 
"<div id='cerrar$i' align='center'>[CERRAR]</div> ";
        
        if(
trim($datosVentana["enlace_ven"]<>"")){
            echo 
"<a href='".$datosVentana["enlace_ven"]."' target='".$datosVentana["target_ven"]."'><img src='../imagenes/vemergente/".$datosVentana["imagen_ven"]."' border='0' align='center'></a>  </div>";
        }else{
            echo 
"<img src='../imagenes/vemergente/".$datosVentana["imagen_ven"]."' border='0' align='center'>  </div>";    
        }
        
$i=$i+1;
    }
 } 
?>
 
  <script type="text/javascript">
$("#pop1 ").animate({"top": "-=40%"}, "slow");
</script>

</body>
los resultados son similares, solo que la ventana emergente aparece un poco mas arriba pero no obtiene ese movimiento que deseo.

saludos, un pokito mas siento que ya estamos cerca de la solucion saludos.
mira como sale en mi web
http://www.munidepocollay.gob.pe/principal/index.php
  #12 (permalink)  
Antiguo 26/04/2011, 18:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ventana Emergente con CSS

bueno el código a copiar tenía algunos errores. prueba con este
Cita:
<html>

<head>

</head>

<body>

<div style="height:3000px;"></div>


<script>

if (!document.layers)

document.write('<div id="divStayTopLeft" style="position:absolute">')

</script>



<layer id="divStayTopLeft">



<!--EDIT BELOW CODE TO YOUR OWN MENU-->

<table border="1" width="130" cellspacing="0" cellpadding="0">

<tr>

<td width="100%" bgcolor="#FFFFCC">

<p align="center"><b><font size="4">Menu</font></b></td>

</tr>

<tr>

<td width="100%" bgcolor="#FFFFFF">

<p align="left">&nbsp;<a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>

&nbsp;<a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>

&nbsp;<a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>

&nbsp;<a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>

&nbsp;<a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>

</tr>

</table>

<!--END OF EDIT-->



</layer>





<script type="text/javascript">



/*

Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)

Script featured on/available at http://www.dynamicdrive.com/

This notice must stay intact for use

*/



var verticalpos="frombottom"



if (!document.layers)

document.write('</div>')



function JSFX_FloatTopDiv()

{

var startX = 300, // si quieres que aparezca mas centrada, sumale

startY = 350; // si quieres que aparezca mas cerca del top, sumale

var ns = (navigator.appName.indexOf("Netscape") != -1);

var d = document;

function ml(id)

{

var el=d.getElementById?d.getElementById(id):d.all?d.a ll[id]:d.layers[id];

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x;this.style.t op=y;};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function()

{

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : document.body.scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 100);

}

ftlObj = ml("divStayTopLeft");

stayTopLeft();

}

JSFX_FloatTopDiv();

</script>


</body>
</html>
  #13 (permalink)  
Antiguo 27/04/2011, 16:34
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Ventana Emergente con CSS

Alguna otra sugerencia utilizando Java script para lograr el efecto de la ventana emergente
ya que ninguna de sus recomendaciones me resulto.

saludos y gracias de antemano
  #14 (permalink)  
Antiguo 27/04/2011, 18:13
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Ventana Emergente con CSS

mercury, el código que te pase anteriormente anda (al de isabel no lo probé aunque confío en que también debería andar) nada mas tienes que poner atención en él y probar, pero la base está. Si lo tomas y algo no te sale, bien, postea ese codigo y lo vemos. Saludos.

pd: si necesitas ayuda puntual con jquery tambien te será útil preguntar en el foro de frameworks javascript.
  #15 (permalink)  
Antiguo 28/04/2011, 05:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ventana Emergente con CSS

creo que tienes un problema de implementación. el código has de insertarlo al final del documento, justo antes de la etiqueta </body>

Etiquetas: emergente, ventanas
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.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 17:01.