Pop-Up sólo con CSS

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.

mostrareste es otro contenido con cualquier cosa que uno quiera, incluyendo enlaces o imágenes

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.