[Tutorial] Como hacer Pop Up
Bueno esto es un tutorial basicamente basado http://vagabundia.blogspot.com/2011/09/p...n-css.html Que esta editado por mi ;) 1) Copiamos nuestro H...

Bueno esto es un tutorial basicamente basado http://vagabundia.blogspot.com/2011/09/p...n-css.html
Que esta editado por mi Wink

1) Copiamos nuestro HTML para donde queramos usarlo basicamente se usa "cabecera" del foro que se encuentra en plantillas, en el resultado yo edite el "header_welcomeblock_member"
ESTE SERIA EL DEFAULT COMO VIENE
Código PHP:
<input type="checkbox" id="popup" class="popUpControl">
<
label class="elboton" for="popup">
  <
span class="click">mostrar</span>
  <
span class="hiddenbox">
    
ACA PONEMOS LO QUE QUERAMOS TENER DENTRO DEL POP UP
  
</span>
</
label
OPCIONAL:: ESTE SERIA COMO LO TENGO YO, YA EDITADO
Código PHP:
<input type="checkbox" id="popup" class="popUpControl">
<
label class="elboton" for="popup">
<
span class="click">Mi Pop Up</span>
  <
span class="hiddenbox">
  <
span><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp">Configuracion</a><br />
  <
span><a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" class="avatar">Editar Avatar</a><br />
  <
span><a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" class="firma">Editar Firma</a><br />
  <
span><a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}class="perfil";/><b>Ver Perfil</b></a><br />
  <
span><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}class="logout">{$lang->welcome_logout}</a>
</
span>
</
label

2) Y LUEGO NUESTRO CSS, QUE ESTA EDITADO POR MI ESTE ;P
Código PHP:
/* la etiqueta LABEL */
  
.elboton {
    
background-colortransparent;
    
border-radius5px;
    
color#026CB1;
    
cursorpointer;
    
displayinline-block;
    
font-size10px;
    
margin0;
    
padding5px 5px;
    
positionrelative;
    
top0px;
    
font-weightbold;
  }
 
/* el contenedor con lo lo que queremos mostrar */
  
.hiddenbox {
    
background-color#FFF;
    
border-radius5px;
    
left: -70px;
    
line-height30px;
    
margin0;
    
opacity0;
    
positionabsolute;
    
text-aligncenter;
    
top120%;
    
z-index100;
    
width170px;
    
border1px solid #cecece;
    
border-top3px solid #cecece;
    
font-weightbold
    -
moz-transitionall 1s;
    -
webkit-transitionall 1s;
    -
o-transitionall 1s;
    -
ms-transitionall 1s;
  }
  
/* se muestra el contenido oculto */
  
.popUpControl:checked label > .hiddenbox {
    
opacity1;
    -
moz-transformscale(1);
    -
webkit-transformscale(1);
    -
o-transformscale(1);
    -
ms-transformscale(1);
  }
  
/* el CHECKBOX lo mantenemos siempre oculto */
  
.popUpControl {displaynone;} 

3) RESULTADO
[Imagen: 19kgbpR.jpg]


Aclaro que pude hacer el Pop Up asi pero no logro hacer que se escondan las URL es decir el Pop Up esta oculto pero al pasar el mouse por donde estaria el Pop Up las url se pueden hacer click.
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Última modificación: 23 Jan, 2013, 1:24 pm por fabiibiografiia.