ModalExtender

Bootstrap modal extender to display Loading message at least some time (specified by user). To prevent blinking of Loading message in case of too fast Ajax response :)

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<input type="button" value="Show message" onclick="showMessage()" />
<div id="dataLoadInProgress" class="modal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Загрузка данных...</h3>
            </div>
            <div class="modal-body text-center">
                <h3>.................</h3>
            </div>
        </div>
    </div>
</div>

JavaScript

// TODO: функции для удобства смены modal-title & modal-body
// SetTitle & SetBody
// Управление кнопками?

var modalLoadInProgress = ModalExtender("#dataLoadInProgress");

function showMessage() {
    //before send Ajax
    modalLoadInProgress.show();
    //success:
    modalLoadInProgress.hideAfterMinDelay();
}

/* selector of model element */
function ModalExtender(selector) {
    var _selector = selector;
    var timeShowLoaderPopup;
    var timeToDisplayLoaderPopup = 666;
    
    function show() {
        $(_selector).modal('show');
        timeShowLoaderPopup = Date.now();
    };
    
    function hide() {
        $(_selector).modal('hide');
    }
    
    function hideAfterMinDelay()
    {
        var timeToLoadData = Date.now() - timeShowLoaderPopup;
        if (timeToLoadData > timeToDisplayLoaderPopup)
            hide();
        else {
            setTimeout(function () {
                hide();
            }, (timeToDisplayLoaderPopup - timeToLoadData));
        }
    };
    
    function setTitle(text) {
        $(_selector).find('.modal-title').html(text);
    };

    function setBody(text) {
        $(_selector).find('.modal-body').html(text);
    }
    
    return {
        show: function () { show(); },
        hide: function () { hide(); },
        hideAfterMinDelay: function () { hideAfterMinDelay(); },
        setTitle: function (text) { setTitle(text); },
        setBody: function (text) { setBody(text); }
    };
}