Psychotik

solucionando marrones desde 2003

Ventana modal sencilla sin Javascript

Pertenece a  Destacados, Tips  el 11 Noviembre
Ventana modal sin JS

Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.

Código HTML:

/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
   ‹a href=”#cerrar”›‹/a›
   ‹div id=”modalContent”›
      ‹h1›Soy una ventana modal‹/h1›
      ‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
      ‹a href=”#cerrar”›X‹/a›
   ‹/div›
‹/div›

Código CSS:
/* Creamos unos estilos para el botón */
.btn{
   position:relative;
   padding:8px 16px;
   font-family:'psychotik';
   font-size:1.2em;
   font-weight:normal;
   color:#fff;
   text-shadow:none;
   border-radius:16px;
   background:#00A6B6;
   box-shadow:inset 2px 2px 1px #007f8b;
}
.btn:hover{
   background:#FF9C00;
   box-shadow:inset 2px 2px 1px #995f02;
}
/* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */
#modalContent{
   position:absolute;
   top:50%;
   left:50%;
   z-index:6;
   margin:-2% 0px 0px -150px;
   float:left;
   width:300px;
   color:#fff;
   line-height:22px;
   padding:15px;
   border-radius:5px;
   background:#00A6B6;
   border:1px solid #fff;
   box-shadow:0px 2px 1px #999;
}
/* ... los estilos de la ventana central ... */
#modal{
   position:fixed;
   top:0px;
   left:0px;
   z-index:5;
   float:left;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.2);
   display:none;
   opacity:0;
}
/* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */
#modal > a{
   position:fixed;
   top:0px;
   left:0px;
   z-index:1;
   float:left;
   width:100%;
   height:100%;
}
El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal
:target{
   display:block!important;
   opacity:1!important;
}
/* Un botón de cerrar para no despistar al usuario */
#modalContent > a{
   position:absolute;
   top:-4px;
   right:-4px;
   color:#00A6B6;
   border-radius:2px;
   background:#fff;
   padding:4px;
}

Resultado:

Pincha aquí

Por supuesto este solo es un ejemplo sencillo, podeis mezclarlo con transition y animation para darle más vitalidad… Este tema se tratará más en produndidad en el curso CSS, aprende las cosas que otros cursos no te enseñan.


Volver atrás

8 respuestas a “Ventana modal sencilla sin Javascript”

  1. Sergio maximo dice:

    Cómo se pude hacer para que sea modal modal que no se cierre si presiono afuera de la ventana solo si presiono la cruz para cerrar.
    Muchas gracias.

    • Borja dice:

      Hola Sergio, solo tienes que quitar del código HTML el ‹a href=”#cerrar”›‹/a› que va justo al comienzo del ‹div id=”modal”› que es el que está haciendo de capa al 100% de ancho y alto transparente y que permite cerrar desde cualquier punto, si lo quitas ya solo se podrá cerrar desde el botón.

      Saludos

  2. Jose Hernandez dice:

    ¡Excelente! Batallé mucho para conseguir lo que usted tiene en este blog. Gracias y bendiciones para usted.

  3. Juan clara dice:

    Excelente me gusto esta ventana

  4. dmaizo dice:

    Como podria hacer para q aparezca la ventana modal al validar el formulario y retorne un false?

    • Borja dice:

      La verdad es que no trabajo la parte de programación, espero que otro usuario te pueda ayudar… ¡sorry!

  5. RaulPaez dice:

    como podria hacer para que cuando entren a la pagina aparezca la ventana ?

    • Borja dice:

      Con darle “display:block” al estilo #modal se debería ver ya por defecto nada más entrar, ya que es el display es lo que hace que se vea o no, y por defecto la tenemos en ‘none’ :D

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »