Please wait

Modal wait message

by doug65536

HTML

<button type="button">Wait</button>

JavaScript

function PleaseWait(message, zindex) {
    var overlay = $('<div/>').css({
        position: 'fixed',
        top: '0px', 
        left: '0px', 
        width: '100%', 
        height: '100%', 
        opacity: '0.5', 
        'background-color': 'black',
        'z-index': zindex || 10
    });
    var wait = $('<div/>').css({
        position: 'absolute',
        top: '50%',
        left: '50%',
        display: 'inline-block',
        transform: 'translate(-50%,-50%)',
        padding: '16px',
        border: 'solid black 1px',
        'border-radius': '16px',
        'background-color': 'white',
        'z-index': (zindex || 10) + 1
    });
    var message = $('<p/>').text(message);
    
    wait.append(message);
    $('body').append(overlay).append(wait);
    
    return function() {
        overlay.remove();
        wait.remove();
    }
}

$('button').on('click', function() {
    var wait = PleaseWait("Wait!");
    setTimeout(function() {
        wait();
    }, 5000);
});