02 Dic 2015

Modal de carga para bootstrap

Modal de carga para bootstrap

Todo debe estar en un diseño responsivo, TODO.
Y bootstrap es el framework más sencillo y documentado para conseguirlo.

Así que para integrar un aviso de espera (por carga de datos o contenido), lo mejor es usar bootstrap para no romper el estilo.

Y como somos desarrolladores serios, lo primero es diseñar un componente que pueda ser reutilizable, así que lo siguiente es un pequeño script que permite mostrar ese aviso cada que sea necesario.

var loader
loader = loader || (function () {
    var ajaxLoader = $('div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">div class="modal-dialog"> div class="modal-content"> div class="modal-header">h4 id="titulo" class="modal-title">Cargando...</h4> /div> div class="modal-body">div class="alert" role="alert alert-info">div class="progress">div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 90%">/div> /div> /div> /div> /div> /div>/div>')
    return {
        show: function() {
            ajaxLoader.modal('show')
        },
        hide: function () {
            ajaxLoader.modal('hide')
        },

    }
})()

Así, cada vez que desees mostrar ese modal, debes ejecutar:

loader.show()

o hide para ocultarlo.

Quieres saber más sobre javascript?
Contáctame: ivan.miranda{arroba}sincco.com

Artículos relacionados