Documentos de Académico
Documentos de Profesional
Documentos de Cultura
OBJETIVOS:
Conozca el uso de las ventanas modales
Implemente páginas web con ventanas modales
VENTANA MODAL
Una de las cosas que más se agradecen cuando, como usuarios, utilizamos aplicaciones web es la usabilidad
y el formato visual de las propias páginas. Dar la sensación de orden, de claridad y de posesión de control
ayuda a que los usuarios se sientan cómodos y vuelvan.
Las cajas o ventanas modales resultan muy útiles a la hora de captar la atención del usuario, ya que le impiden
interactuar con el resto de elementos de la página mientras no la cierre.
Seguro que, en algún proyecto, el cliente te ha sugerido mostrar un mensaje o cierta información al usuario
que destaque respecto al contenido de la página. Ya sea cuando pulsamos un botón o automáticamente
cuando el usuario lleve cierto tiempo en el artículo o página de la susodicha web. Esto nos da una idea de lo
que conocemos por modal.
Es, por tanto, es una capa que se superpone a las demás quedando en primer plano de nuestra web y dejando
en un segundo plano el resto de la página. Para que el usuario no capte la atención en otro componente que
no sea el modal, se suele crear éste dentro de otra capa que ocupa el 100% del ancho y del alto de la ventana
con un mínimo de opacidad y tono oscuro.
Pasos a seguir
1. Crea una plantilla básica de HTML
2. Añade el modal con Bootstrap que se encuentra en pagina oficial
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, Vilcanota</h1>
1
Ing. Gregorio CCAPATINTA QUISPE
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO
PÚBLICO ‘VILCANOTA’ - SICUANI
PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA
TALLER DE PROGRAMACIÓN WEB - GUÍA 16
2
Ing. Gregorio CCAPATINTA QUISPE
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO
PÚBLICO ‘VILCANOTA’ - SICUANI
PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA
TALLER DE PROGRAMACIÓN WEB - GUÍA 16
Línea 10: en el div con clase “modal-body” es donde insertaremos el contenido que queremos que haya en
el modal.
Una vez que tenemos el modal creado y, por defecto, oculto, tenemos que elegir la manera de que se
muestre al usuario. Para ello, vamos a usar un botón de los que viene predeterminados en la librería de
Bootstrap.
RESULTADO FINAL.
3
Ing. Gregorio CCAPATINTA QUISPE