JMiur [E]

Este es otro intento de CSS-tricks para tratar de controlas el evento click con CSS, usando, como en el ejemplo publicado hace unos días, etiquetas que normalmente están reservadas para la creación de formularios tales como INPUT y LABEL.

Aquí, se trata de crear un pop-up; una ventanita con cierto contenido, que se abra cuando hacemos click en alguna clase de botón y que, en principio, podría contener cualquier cosa.

En este ejemplo, he jugado un poco, eliminado cosas, agregando otras, probando a ver qué salía y lo primero que debería aclarar es que no funciona en versiones anteriores a IE9 y no sé si lo hace en esa versión. Lo segundo es que no he encontrado la forma de poder controlar cuando se intenta poner dos o más en lugar de una salvo repitiendo el CSS y usando IDs en lugar de clases cosa que no tiene mucho sentido así que esa parte, quedará pendiente y si alguien tiene una idea, soy todo oidos.



Este sería el HTML:
<input type="checkbox" id="popup" class="popUpControl">
<label class="elboton" for="popup">
  <span class="click">mostrar</span>
  <span class="hiddenbox">
    .......
  </span>
</label>
La etiqueta INPUT que es del tipo checkbox, permanecerá oculta siempre pero, es la que no permitirá usar sólo CSS ya que podemos saber si está "marcada" ya que, cuando hacemos click, cambia la propiedad llamada checked.

La etiqueta LABEL se asocia a la primera y es lo que veremos. Un SPAN es el pseudo-botón y otro SPAN el contenido que permutará, haciéndose visible u ocultándose, con alguna clase de animación.

El CSS:
<style>
  /* la etiqueta LABEL */
  .elboton {
    background-color: #AAA;
    border-radius: 10px;
    box-shadow: 0 0 10px #222 inset;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px #000;
  }
  /* en un post de Blogger. oculto los saltos de línea internos para no volverme loco */
  .elboton br {display:none;}
  /* el contenedor con lo lo que queremos mostrar */
  .hiddenbox {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px #000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -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;}
  /* cambiamos el texto del pseudo-botón */
  .popUpControl:checked ~ label > span.click {display: none;}
  .popUpControl:checked ~ label:before {content: "ocultar";}
</style>
Ah. Me olvidaba. Tampoco tengo idea de cómo hacer que pop-up se anime cuando aparece; sólo lo hace cuando se oculta.

9 comentarios:

Eduardo_mb.  

Con lo salvo repitiendo, te refieres a repetir el codigo solamente cambiando el ID?

Responder
Johnny  

He probado cambiando el ID y varias cosas mas y solo puedo ponerlo para mostrar una cosa. Si quiero reutilizarlo para otras cosas, no vale, pues cuando le das a mostrar te sale lo mismo. Seguire probando a ver... Saludos.

Responder
JMiur  

No, no creo que sea tan simple como cambiar el ID, de alli que no tenga reespuestas.

Responder
SoloKvcd  

Excelente ... alguna manera de que no se oculte tocando lo que muestra ?
digo ocultar solo presionando el botón ?
Saludos Cordiales

Responder
SoloKvcd  

por cierto en IE9 no funciona (tal como dijo JMiur)
en Chrome si se anima al mostrar y ocultar
safari si se anima al mostrar y ocultar
en Firefox se anima al ocultar
saludos Cordiales Nuevamente

Responder
Víctor Alfonso González  

Hola JMiur, necesito que por favor me ayudes con algo... En este blog
El Reto de las Casas aparentemente todo se ve bien, pero cuando cambio el tamaño de la ventana del navegador todo se descuadra. ¿Cómo puedo corregir está situación? Te adjunto la plantilla del blog AQUÍ.

Responder
JMiur  

Hasta ahi llegué, SoloKvcd. No termino de entender cómo funciona este coso :D

Responder
DarkRamses  

Jmiur, mira en fwos.net alli lo utilizo, pero es un css para cada popup. date la vuelta y reviza el codigo h aber que te sirve.

Responder
kinafusta  

no me sale, donde pongo la imagen que quiero mostrar?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR