Ventana Emergente con CSS

[mercury17_18]

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; 
   border: 1px 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

[cristian_cena]

Hola mercury. dale distancias con porcentajes.
ejemplo:

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


Saludos.

[mercury17_18]

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%;
   border: 1px solid #E3E0C4; 
   text-align:center; 
   background:#0796de;
   border:solid 1px #000000;
} 
   

saludos algun otro consejo

[IsaBelM]

usa position: fixed

[cristian_cena]

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.

[mercury17_18]

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%;
   border: 1px 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.

[IsaBelM]

eso es javascript prueba con este. para conseguir un delay mayor has de editar el temporizador setTimeout()

[cristian_cena]

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.

[mercury17_18]

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%;
   border: 1px 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

[cristian_cena]

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.

[mercury17_18]

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

[IsaBelM]

bueno el código a copiar tenía algunos errores. prueba con este

<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>

[mercury17_18]

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

[cristian_cena]

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.

[IsaBelM]

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