[Tutorial] Como hacer Pop Up

Finer 23 Jan, 2013, 1:18 pm

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:
<?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:
<?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:
<?php 

/* la etiqueta LABEL */

  .elboton {

    background-color: transparent;

    border-radius: 5px;

    color: #026CB1;

    cursor: pointer;

    display: inline-block;

    font-size: 10px;

    margin: 0;

    padding: 5px 5px;

    position: relative;

    top: 0px;

    font-weight: bold;

  }

 /* el contenedor con lo lo que queremos mostrar */

  .hiddenbox {

    background-color: #FFF;

    border-radius: 5px;

    left: -70px;

    line-height: 30px;

    margin: 0;

    opacity: 0;

    position: absolute;

    text-align: center;

    top: 120%;

    z-index: 100;

    width: 170px;

    border: 1px solid #cecece;

    border-top: 3px solid #cecece;

    font-weight: bold; 

    -moz-transition: all 1s;

    -webkit-transition: all 1s;

    -o-transition: all 1s;

    -ms-transition: all 1s;

  }

  /* se muestra el contenido oculto */

  .popUpControl:checked ~ label > .hiddenbox {

    opacity: 1;

    -moz-transform: scale(1);

    -webkit-transform: scale(1);

    -o-transform: scale(1);

    -ms-transform: scale(1);

  }

  /* el CHECKBOX lo mantenemos siempre oculto */

  .popUpControl {display: none;}

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.

Última modificación: 23 Jan, 2013, 1:24 pm por fabiibiografiia.

[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]