Diseño de una Ventana modal

Diseño de una ventana modal interactiva con Javascript ideal para usarlo en nuestros proyectos web

Para desarrollar una ventana es relativamente sencillo usando Javascript puro y html con css.

Una ventana modal es un area que se superpone al contenido de la página web para ofrecer una mejor experiencia de usuario.

 

CODIGO CSS

        body{
            background: rebeccapurple
        }
        #contenedor{
            background: #00000055;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            display: none;
            
        }
        #ventanaModal{
            max-width: 600px;
            background: white;
            margin: 50px auto;
            padding: 5px;
            box-shadow: 0px 0px 10px black;
        }

        .header{
            background: brown;
            color:white;
            padding: 8px;
            text-align: center;
        }
        .footer{
            height: 50px;
            text-align: center;
            background: #f0f0f0;
        }
        #cerrarVentana{
            padding: 5px;
            background: red;
            color:white;
            border:none;
            float:right
        }

        button{
            background: red;
            color:white;
            border: none;
            border-radius: 5px;
            padding: 10px;
        }

Aqui el truco esta en determinar los estilos para #contenedor y #modal; el contenedor debe ser a full pantalla es por ello que tiene  width a 100% y height a 100% y ademas position en absolute con top:0 y left:0

Los estilos para modal determinan que el area central sea de color blanco y es ahi donde reside el contenido que se va a  incluir como formulario, imágenes, videos y textos.  

CODIGO JS

 window.onload=function(){
            document.getElementById("mostrarVentana").addEventListener("click",function(){                
                document.getElementById("contenedor").style.display="block"
            })
            document.getElementById("cerrarVentana").addEventListener("click",function(){                
                document.getElementById("contenedor").style.display="none"
            })
        }

El js es el lenguaje que permite la interactividad, en este caso window.onload chequea que se haya renderizado el documento html para ejecutar las instrucciones; este script tiene dos  escuchadores de eventos una para abrir la ventana modal y otro para cerrar dicha ventana modal. 

CODIGO HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <button id="mostrarVentana">VER VENTANA</button>
    <div id="contenedor">
        <div id="ventanaModal">
            <div class="header">
                TITULO
                <button id="cerrarVentana">X</button>
            </div>
            <div class="contenido">
                FORMULARIO , IMÁGENES
            </div>
            <div class="footer">
                <button>ACEPTAR</button>
            </div>
        </div>
    </div>
    
</body>
</html>

Nuestro código html es sencillo de implementar donde resalta un boton para lanzar el evento click para abrir la ventana modal mediante el id mostrarVentana y otro botón para cerrar la ventana  con el id cerrarVentana.

Concluimos que es un script sencilla pero que nos ayuda a entender la funcionalidad de una ventana modal.

VIDEO Cómo crear una ventana modal con Javascript, CSS y HTML

Visitas: 142 | Publicado:2019-01-07 13:01:29

Más publicaciones de CSS que te pueden interesar:

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::