Ventana modal con css fácil (Con ejemplo)

Ahora vamos a ver como se hace una ventana modal sencilla y fácil con CSS y un poco de Javascript.

No vamos a dar muchos rodeos.

Aquí el CSS:

<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
background: #9fffff;
color: #0000ff;
}

a {
color: #F00;
}

/* base semi-transparente */
    .overlay{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index:1001;
opacity:.75;
        -moz-opacity: 0.75;
        filter: alpha(opacity=75);
    }

    /* estilo para la ventana modal */
    .modal {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        background: #fff;
color: #333;
        z-index:1002;
        overflow: auto;
    }
    </style>

Y aquí la parte de html junto con JavaScript:

 <div id="fade" class="overlay" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
</div>

<div id="light" class="modal">
    <p>Contenido de la ventana modal. Para
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">cerrar</a>
 basta un simple JavaScript.</p>
    </div>

    <p>Con un
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">simple click</a>
 podrás desplegar la ventana modal.</p>

Ahora con este sencillo ejemplo, podemos modificarlo y hacerlo a nuestro gusto.

Espero que os haya servido.

Más articulos

Tweet

Escrito por Unknown

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!