Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guia 016 - Modales - Taller de Programacion Web PDF

    Cargado por

    Gregorio Ccapatinta Quispe
    19 vistas3 páginas

    Título original

    GUIA 016 - MODALES - TALLER DE PROGRAMACION WEB.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    19 vistas3 páginas

    Guia 016 - Modales - Taller de Programacion Web PDF

    Cargado por

    Gregorio Ccapatinta Quispe

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    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

    TEMA: MODAL DIALOG EN BOOTSTRAP.

    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
    CREA UNA PLANTILLA BÁSICA DE HTML
    Primero crea una carpeta en tu servidor. Más tarde, crea un fichero llamado index.html en ella, y añádele
    algo de HTML básico, tampoco muy complejo puesto que esto es una prueba. También crea dos carpetas
    más dentro de modal, una llamada js, que es donde alojaremos los fichero javascript que vayamos
    necesitando, y otra llamada css para las hojas de estilo. Ahora descárgate jQuery y Bootstrap de sus sitios
    oficiales y añádelos a sus respectivas carpetas.
    Este será nuestro HTML de ejemplo para nuestra plantilla.

    <!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">

    <!-- Bootstrap CSS -->


    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
    </head>
    <body>
    <h1>Hello, Vilcanota</h1>

    <!-- Optional JavaScript -->


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.slim.min.js"></script>

    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

    <script src="js/popper.min.js" ></script>


    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    AÑADE EL MODAL CON BOOTSTRAP
    Ahora copia el siguiente código HTML y pégalo en tu fichero index.html, dentro del tag body.
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-
    target="#exampleModal">
    Ver ventana
    </button>

    <!-- Modal -->


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
    labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">VENTA MODAL</h5>
    <button type="button" class="close" data-dismiss="modal" aria-
    label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
    CONTENIDO
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-
    dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div>
    </div>
    </div>
    EL HTML DEL MODAL
    Ahora que tenemos cargadas las librerías, tenemos que crear el código HTML que hará que funcionen las
    funciones que nos ofrecen ambas.
    En primer lugar, vamos a crear el modal en sí. Para que sea más fácil de explicar, dejamos aquí el código y,
    seguidamente, explicaremos línea a línea:
    Línea 1: creamos el contenedor principal con un ID único (en nuestro caso “miModal”). Es importante
    quedarnos con este ID ya que será el que usemos a la hora de llamar a la función que muestra este
    contenedor. Es este el contenedor, que comentábamos antes, que tiene el fondo oscuro con cierta opacidad
    que hace que reste protagonismo al resto de la página.
    Linea 2: es el contenedor donde está definido el tamaño del contenedor (por defecto 600px).
    Línea 3: se trata de un contenedor donde están asociados estilos tales como fondo del modal, bordes,
    sombreados, etc.
    Línea 4: en esta línea, Bootstrap mete el DIV que contiene el botón de cerrar el modal así como el título del
    modal en un encabezado (H4).

    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

    También podría gustarte