Modals en Bootstrap

Clase 34 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Veamos como crear modales con Bootstrap.

Genaro Calvillo Escamilla

student•

Para bloquear el modal y no poder hacer clic fuera del mismo, añadan los siguientes atributos al llamar al modal:

$('#modalOferta').modal({backdrop: 'static', keyboard: false})

Cesar David Ramírez Dimaté

student•

Excelente aporte

function mostrarModal() {
  if (localStorage.noMostrarModal == null) {
    localStorage.noMostrarModal = false;
  }

  const noMostrarModal = JSON.parse(localStorage.noMostrarModal);

  if (!noMostrarModal) {
    $('#modalOferta').modal({backdrop: 'static', keyboard: false});
  }
  
  $('#btnNoRegistrar').click(function onclick(ev) {
    localStorage.noMostrarModal = true;
  });
}

Genaro Calvillo Escamilla

student•

Añadan las siguientes líneas al método mostrarModal, de esta forma no tendrán error de inicialización con la variable noMostrarModal

if(localStorage.noMostrarModal==undefined){ localStorage.noMostrarModal = false }

Cesar David Ramírez Dimaté

student•

También lo puedes colocar de la siguiente forma:

var v_modal = localStorage.noMostrarModal;
const noMostrarModal = (v_modal == null) ? false : JSON.parse(v_modal);

Juan David lemus Rubiano

student•

y para el texto, solo necesitan teclear en sublime text lorem y control + espacio y de una les trae el texto

OSCAR ANDRES TREJO NARVAEZ

student•

utilizando la clase modal fade no me aparece y si le quito el fade me aparece el fondo oscuro alguien me ayuda?

Jonatan Ruben Sosa Caycay

student•

Añadi un validador,

// mostrar modal
function mostrarModal() {

    if(localStorage.noMostrarModal == undefined) {
        localStorage.noMostrarModal = false;
    }

    const noMostrarModal = JSON.parse(localStorage.noMostrarModal);
    
    if(!noMostrarModal) {
        $('#modal-oferta').modal();
    }

    $('#btnNoRegistrar').click(function (ev) {
        localStorage.noMostrarModal = true;
    });
}```

Alexander Valencia

student•

Sebastian Vasquez Rodriguez

student•

El modal queda como homework ?

Fernando David Soto Betin

student•

Otra Posible Solución Para El Modals:
function mostrarModal() {

const noMostrarModal = JSON.parse(localStorage.noMostrarModal);

if (!noMostrarModal) {
$("#modalOferta").modal();
localStorage.noMostrarModal = false;
}

$(’#btnNoRegistrar’).click( function (ev) {
localStorage.noMostrarModal = true
})

}

Duilio Luque

student•

Como hacer para no repetir el header y footer en cada pagina que exista en nuestra web?

Cesar David Ramírez Dimaté

student•

Eso se hace más que todo por el lado del back-end. Por ejemplo, en python con django se crean templates diferentes y se llama cada uno de ellos.

David Moya Garcia

student•

Este video me está dando problemas en su reproducción.

Kath Sánchez

teacher•

¿Intentaste con el otro server y con otro navegador?

David Moya Garcia

student•

Si y no me dejaba. Ahora parece que si. Gracias.

Epifanio Pulido Avilez

student•

me da error en catalogo en el script de monstrarModal()

Edgardo Flores

student•

igual ami

Cesar David Ramírez Dimaté

student•

debes colocar esto al inicio

if (localStorage.noMostrarModal == null) {
    localStorage.noMostrarModal = false;
  }

Santiago Gómez

student•

También tuve el inconveniente que con la clase modal fade la ventana modal aparecía invisible, en la documentación no encontré una solución cuando se hace llamado desde js, por lo tanto la única solución que encontré fue modificar las clase fade de manera manual, a continuación les comparto las modificaciones que hice

/* Muestra la ventana Modal y oscurece el fondo */
.fade{
	opacity: 1;
	background-color: #00000070;
}

/* Ajusta la posición de la ventana modal  */
.modal-dialog{
	margin: 5% auto;
}

Cesar David Ramírez Dimaté

student•

Raro, porque en si debería funcionar, por lo menos la versión 4.1.1

.fade {
    transition: opacity .15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

Luis Angel Vásquez Nepomuceno

student•

¿Cómo funciona LocalStorage? | ¿Cómo guardar información en el navegador sin usar cookies?

Cesar David Ramírez Dimaté

student•

San google LocalStorage

Dayan Betancourt

student•

Me da un error al usar JSON

jquery.min.js:2 jQuery.Deferred exception: Unexpected token u in JSON at position 0 SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at mostrarModal```

Dayan Betancourt

student•

Mi funcción es la siguiente:

function mostrarModal() {
	var noMostrarModal = JSON.parse(localStorage.noMostrarModal);

	if(!noMostrarModal) {
		$("#modalOferta").modal();
	}

	$("#btnNo Registrar").click(function(ev) {
		localStorage.noMostrarModal = true;
	});
}```

Diana Velásquez

student•

Lo mismo me pasó por el hecho de que la variable no esta definida, por lo cual agregué una validación:

function mostrarModal(){
	var storage = localStorage.noMostrarModal;
	var noMostrarModal = (storage===undefined) ? false : JSON.parse(storage);

	if (!noMostrarModal){
		$("#modalOferta").modal();
	}
		
	$("#btnNoRegistrar").click(function(ev){
		localStorage.noMostrarModal = true
	});
}

Espero que te sirva (:

Usuario anónimo

user•

Hasta donde entiendo, este ejercicio con el modal sólo funcionó en la consola pero ¿cuál fue el código correcto?

Cesar David Ramírez Dimaté

student•

Te dejo el código final. Tienes dos opciones. O limpiar el cache del navegador para volver a hacer la prueba, o colocar la variable noMostrarModal en false cada vez que quieras verlo.

function mostrarModal() {
  if (localStorage.noMostrarModal == null) {
    localStorage.noMostrarModal = false;
  }

  const noMostrarModal = JSON.parse(localStorage.noMostrarModal);

  if (!noMostrarModal) {
    $('#modalOferta').modal({backdrop: 'static', keyboard: false});
  }
  
  $('#btnNoRegistrar').click(function onclick(ev) {
    localStorage.noMostrarModal = true;
  });
}

Modals en Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman