Foros del Web » Programando para Internet » PHP »

Ayuda :) Como agregar una ventana flotante??

Estas en el tema de Ayuda :) Como agregar una ventana flotante?? en el foro de PHP en Foros del Web. Hola e intentado por todos los medios mejorar un script en php de un fotolog multiusuario de una comunidad y aun no encuentro la manera ...
  #1 (permalink)  
Antiguo 24/01/2010, 07:53
 
Fecha de Ingreso: enero-2010
Mensajes: 8
Antigüedad: 14 años, 10 meses
Puntos: 0
Información Ayuda :) Como agregar una ventana flotante??

Hola e intentado por todos los medios mejorar un script en php de un fotolog multiusuario de una comunidad y aun no encuentro la manera de aguegar una ventana flotante cosa que el usuario pueda ver los colores con sus codigos para que ellija los colores para configurar el flog. Les cuento que nunca aprendi PHP pero lo voy deduciendo de apoco y mejorando al diseño que tiene muchas fallas. Muchas gracias por sus comentarios

Este es parte del codigo en cuestion:


<form name=\"form1\" enctype=\"multipart/form-data\" method=\"post\" action=\"panel.php?config=ok&login=$login\">
<p><b>» Preferéncias del Flog </b></p>

<center>
<p>
Título del Flog............ :
<input name=\"flog_title_flog\" type=\"text\" value=\"$titulo_flog\" id=\"flog_title_flog\" style=\"width: 200px;\">

Tipo de Letra :

<select name=\"flog_tipoletra\">";
$fonte = array("Verdana, Arial, Helvetica, sans-serif", "Arial, Verdana, Helvetica, sans-serif", "Times New Roman, Verdana, Helvetica, sans-serif", "Comic Sans MS, Verdana, Helvetica, sans-serif", "Trebuchet MS, Arial");
$count = count($fonte);
for($i=0;$i<$count;$i++){
if($fonte[$i] == $tipo_letra){
/*Pegando somente antes da , */
$exp = explode(",", $fonte[$i]);
$dis = $exp[0];
echo "<option value=\"".$fonte[$i]."\"selected>".$dis."</option>";
}
else{
/*Pegando somente antes da , */
$exp = explode(",", $fonte[$i]);
$dis = $exp[0];
echo "<option value=\"".$fonte[$i]."\">".$dis."</option>";
}
}
echo "
</select>

Tamaño del Titulo : ";

echo "<select name=\"flog_tamtitulo\">";
for($i=1;$i<=7;$i++){
if($i == $tamanho_titulo){
echo "<option selected>".$i."</option>";
}
else{
echo "<option>".$i."</option>";
}
}
echo "</select>";
echo"

<br><br>
<br><br>
Color del Titulo.......... :
<input name=\"flog_cortitulo\" type=\"text\" value=\"$cor_titulo\" id=\"flog_cortitulo\">

Color del Fondo del Flog del
<input name=\"flog_cor_topo\" type=\"text\" value=\"$cor_topo\" id=\"flog_cor_topo\">

<br>
<br>
Color de Links........... :
<input name=\"flog_corlink\" type=\"text\" value=\"$cor_link\" id=\"flog_corlink\">

Color del Fondo del Centro del
<input name=\"flog_cor_centro\" type=\"text\" value=\"$cor_centro\" id=\"flog_cor_centro\">

<br>
<br>
Color de Letras......... :
<input name=\"flog_corletra\" type=\"text\" value=\"$cor_letra\" id=\"flog_corletra\">

Color del Fondo de la Izquierda del Flog :&nbsp;&nbsp;
<input name=\"flog_cor_esquerda\" type=\"text\" value=\"$cor_esquerda\" id=\"flog_cor_esquerda\">

<br>
<br>
Color de Fondo......... :
<input name=\"flog_corfundo\" type=\"text\" value=\"$cor_fundo\" id=\"flog_corfundo\">

Color del Fondo de la Derecho del Flog :&nbsp;&nbsp;&nbsp;&nbsp;
<input name=\"flog_cor_direita\" type=\"text\" value=\"$cor_direita\" id=\"flog_cor_direita\">

<br>
<br>
<b>Atención:</b> el color de las fuentes y los enlaces de su Flog no puede ser igual al color de fondo,
<br> o no se verán los textos de links y los demás / enlaces no podrán ser EXIBIDOS correctamente.
<br>
<br>

Número de Fotos recientes a mostrar en la página principal de su Flog : ";

echo "<select name=\"fotos_recentes\">";
for($i=1;$i<=30;$i++){
if($i == $recentes){
echo "<option selected>".$i."</option>";
}
else{
echo "<option>".$i."</option>";
}
}
echo "</select>";
echo"
<br>
<br>
<a href=\"#\" onclick=\"MM_openBrWindow('tab_colores.htm','','sc rollbars=no,width=250,height=208')\"><b>»»» Para ver la tabla de colores haga clic aquí «««</b></a>
<br><br>
<a href=\"#\" onclick=\"MM_openBrWindow('colores_varios.php','', 'scrollbars=yes,width=850,height=500')\"><b>»»» Para otras tablas de colores haga clic aquí «««</b></a><br><br>
</p>
</center>

Creo que se deberia variar estos ultimos parametros dentro del <form> pero no se como hacerlo. Si Existe la forma de que al elegir el color haciendo clic sobre el se cargue en el campo de la ventana principal seria lo ideal. Pero de ultima tambie puede ser como dije una ventanita flotante hacia la derecha donde se vean los codigos y los colores.
  #2 (permalink)  
Antiguo 24/01/2010, 08:11
 
Fecha de Ingreso: enero-2010
Mensajes: 152
Antigüedad: 14 años, 10 meses
Puntos: 5
Respuesta: Ayuda :) Como agregar una ventana flotante??

Bueno, eso no se hace con PHP sino con javascript, ya que es código que se debe ejecutar de lado del cliente.
  #3 (permalink)  
Antiguo 24/01/2010, 08:43
 
Fecha de Ingreso: enero-2010
Mensajes: 8
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Ayuda :) Como agregar una ventana flotante??

Gracias Paynalton por tu rapida respuesta pero como seria ese codigo. gracias a tu comentario lo que yo logre es abrir una ventana pop cuando se ingresa pero me gustaria que esa ventana acompañe al usuario cuando el esta en la pagina principal y que solo el la cierre en la X y que tambien esta ventana tome una posicion definida en el monitor.
Como seria esto???
  #4 (permalink)  
Antiguo 24/01/2010, 09:23
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años, 6 meses
Puntos: 50
Respuesta: Ayuda :) Como agregar una ventana flotante??

Busca información sobre lightbox o fancybox o alguna de esas. En realidad, las ventanas flotantes se pueden hacer íntegramente "a mano" en javascript, pero en general se usan librerías que otros ya han desarrollado (aunque ellos sí las hayan echo "íntegramente a mano en javascript" ). ¡Suerte!
  #5 (permalink)  
Antiguo 28/01/2010, 08:38
 
Fecha de Ingreso: enero-2010
Mensajes: 8
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Ayuda :) Como agregar una ventana flotante??

Hola a todos aun sigo sin poder agragar lo que necesito.
alguna ayuda por favor de como seria el codigo.
Intente lo que propuso dggluz pero nada sigo sin lograrlo :(
Recuerden que se poco de PHP casi nada lo que logro es mediante prueba y error :)
  #6 (permalink)  
Antiguo 28/01/2010, 09:11
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 786
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: Ayuda :) Como agregar una ventana flotante??

Prueba con esto:


Código Javascript:
Ver original
  1. <style>
  2.         .black_overlay{
  3.             display: none;
  4.             position: absolute;
  5.             top: 0%;
  6.             left: 0%;
  7.             width: 100%;
  8.             height: 100%;
  9.             background-color: black;
  10.             z-index:1001;
  11.             -moz-opacity: 0.8;
  12.             opacity:.80;
  13.             filter: alpha(opacity=80);
  14.         }
  15.         .white_content {
  16.             display: none;
  17.             position: absolute;
  18.             top: 25%;
  19.             left: 25%;
  20.             width: 50%;
  21.             height: 50%;
  22.             padding: 16px;
  23.             border: 16px solid orange;
  24.             background-color: white;
  25.             z-index:1002;
  26.             overflow: auto;
  27.         }
  28.     </style>
  29.     </head>
  30.     <body>
  31.         <p>Para abrir click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">aquí</a></p>
  32.  
  33.         <div id="light" class="white_content">Contenido del lightbox<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
  34.         <div id="fade" class="black_overlay"></div>
  35.     </body>
  36. </html>


Saludos,!
  #7 (permalink)  
Antiguo 29/01/2010, 18:59
 
Fecha de Ingreso: enero-2010
Mensajes: 8
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Ayuda :) Como agregar una ventana flotante??

Gracias SeaPirates por tu aporte me ayudo mucho a avanzar en el proyecto, practicando logre poner una imagen y ahora lo deje con un cuadro de color pero no encuentro la manera de que al hacer click en el color el codigo de este se cargue en la ventana principal donde se encuentre el cursor en ese momento.
Si alguien me ayuda nuevamente se lo agradezco desde ya el codigo en donde deben tomarse los colores estan arriba en mi 1ª pedido de ayuda. El codigo que me enviaste SeaPirates lo modifique de esta manera para quien tambien lo necesite.

<style>
.black_overlay{
display: none;
position: absolute;
top: 27%;
left: 79%;
width: 28%;
height: 26%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content{
display: none;
position: absolute;
top: 30%;
left: 80%;
width: 25%;
height: 25%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<a href = \"javascript:void(0)\" onclick = \"document.getElementById('light').style.display=' block';document.getElementById('fade').style.displ ay='block'\"><b>»»» Para ver códigos de colores haga click aquí «««</b></a></p>
<div id=\"light\" class=\"white_content\"> Haz click sobre el color
<form>
<font face=\"Comic Sans MS\" >
<select style=\"width:120px;height:80px;font-size:12px;font-family:Comic Sans MS;\">
<option value= \"FFFFFF\"style=\"color:#333300;background-color:#FFFFFF;\">FFFFFF
<option value= \"FAEBD7\"style=\"color:#333300;background-color:#FAEBD7;\">FAEBD7
<option value= \"00FFFF\"style=\"color:#333300;background-color:#00FFFF;\">00FFFF
<option value= \"7FFFD4\"style=\"color:#333300;background-color:#7FFFD4;\">7FFFD4
<option value= \"0000FF\"style=\"color:#333300;background-color:#0000FF;\">0000FF
<option value= \"8A2BE2\"style=\"color:#996600;background-color:#8A2BE2;\">8A2BE2
<option value= \"DEB887\"style=\"color:#333300;background-color:#DEB887;\">DEB887
<option value= \"7FFF00\"style=\"color:#333300;background-color:#7FFF00;\">7FFF00
<option value= \"D2691E\"style=\"color:#333300;background-color:#D2691E;\">D2691E
<select>
</font>
</form>
<a href=\"javascript:void(0)\" onclick=\"document.getElementById('light').style.d isplay='none';document.getElementById('fade').styl e.display='none'\"><br><br>Close - Cerrar Ventana</a></div>
<div id=\"fade\" class=\"black_overlay\"></div>
  #8 (permalink)  
Antiguo 30/01/2010, 07:40
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 786
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: Ayuda :) Como agregar una ventana flotante??

Creo que el codigo esta mal colocado ;/

Código PHP:
<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>






<
a href ="javascript:void(0)" onclick ="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><b>»»» Para ver códigos de colores haga click aquí «««</b></a></p>
<
div id="light" class="white_content"Haz click sobre el color
<form>
<
font face="Comic Sans MS" >
<
select style="width:120px;height:80px;font-size:12px;font-family:Comic Sans MS;">
<
option value"FFFFFF"style="color:#333300;background-color:#FFFFFF;">FFFFFF
<option value"FAEBD7"style="color:#333300;background-color:#FAEBD7;">FAEBD7
<option value"00FFFF"style="color:#333300;background-color:#00FFFF;">00FFFF
<option value"7FFFD4"style="color:#333300;background-color:#7FFFD4;">7FFFD4
<option value"0000FF"style="color:#333300;background-color:#0000FF;">0000FF
<option value"8A2BE2"style="color:#996600;background-color:#8A2BE2;">8A2BE2
<option value"DEB887"style="color:#333300;background-color:#DEB887;">DEB887
<option value"7FFF00"style="color:#333300;background-color:#7FFF00;">7FFF00
<option value"D2691E"style="color:#333300;background-color:#D2691E;">D2691E
<select>
</
font>
</
form>
<
a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><br><br>Close Cerrar Ventana</a></div>
<
div id="fade" class="black_overlay"></div
Aunque de todos modos, no entiendo, que intentas hacer?

Lo que entendí es que quieres que al seleccionar el color, el codigo se cargue dentro de un textarea o algo asi?
  #9 (permalink)  
Antiguo 30/01/2010, 10:49
 
Fecha de Ingreso: enero-2010
Mensajes: 8
Antigüedad: 14 años, 10 meses
Puntos: 0
De acuerdo

Si es lo que intento hacer SeaPirates que cuando yo haga click en los colores de la ventana se carguen en la ventana principal los codigos de estos asi las personas no tengan que tipearlos, es decir que al eligir uno de estos colores

<option value= \"FFFFFF\"style=\"color:#333300;background-color:#FFFFFF;\">FFFFFF
<option value= \"FAEBD7\"style=\"color:#333300;background-color:#FAEBD7;\">FAEBD7

el codigo supongamos FAEBD7 se pegue en la parte donde esta el cursor cuando uno hace click en el form supongamos en lo de abajo

Color de Links........... :
<input name=\"flog_corlink\" type=\"text\" value=\"$cor_link\" id=\"flog_corlink\">

Color del Fondo del Centro del
<input name=\"flog_cor_centro\" type=\"text\" value=\"$cor_centro\" id=\"flog_cor_centro\">

esta ultima fraccion esta arriba todo el codigo. Lo que hace es cuadro de texto a donde se ingresa el codigo del color.
El codigo que postee funciona como lo agregue asi con la / y bueno la posicion de la ventana la modifique para que no tape todo, asi que funciona.

Para que tengan una referencia lo que estoy tratando de modificar dentro de mi ignorancia del lenguaje es un script de un fotolog multiusuario con muchas fallas que lo desarrollaron a medias un grupo de chilewarez; si desean ver lo que voy logrando esta es mi web:

http://www.serlibre.org


alguien tiene alguna idea de como modificar del post de arriba
para que tengan una idea es como cuando hacen click en las caritas de la ventana up-pop de este mensaje y al hacer clic este codigo se carga en la ventana donde se tipea el mensaje ya tengo un que me puso

Última edición por lecofu; 10/02/2010 a las 13:46

Etiquetas: flotante, 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 1 personas




La zona horaria es GMT -6. Ahora son las 14:09.