Ventana Modal Material Design

Tutoriales

Demo Github

Material Design el Framework para hacer nuestras aplicaciones adaptables a cualquier dispositivo es una de los Frameworks que nos da muchas expectativas de todo lo nuevo que puede traer.Voy a mostrarles una manera de crear ventanas Modales con javascript nativamente y lo puedan aplicar a sus proyectos hechos con Material Design.

Primero creamos la vista html:

index.html

En los comentarios indico para que sirve cada elemento html:

Ahora necesitamos nuestro archivo CSS para darle estilo a los elementos html:

estilos.css

Como pueden ver uso max-witdh como responsive design nativo y aplico estilos a los botones y a la ventana modal y demás elementos.

También necesitamos nuestro javascript para darle el efecto y la funcionalidad a nuestra ventana modal:

script.js

En los comentarios describo las acciones mas relevantes del código:

Es importante recordar que estoy usando materialize.css el cual esta en el repositorio Git de esta demo, para que se vea bien el ejemplo en todos los navegadores.

Espero que les sirva de mucho el articulo.

Gracias por su atención.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required