JavaScript - inprocess view

lib func

顯示

function inprocess_view_show(msg) {
    var inprocess_img = '<img src="inprocess.gif" width="30" height=\"30">';
    $('<div id="inprocess"></div>').css({
        'position':'fixed',
        'top':'0px','right':'0px','bottom':'0px','left':'0px',
        'width':'100%', 'height':'100%',
        'opacity':'0.6',
        'background-color':'black',
        'z-index':'999'
    }).appendTo($('body'));
    $('<div>'+'<span id="inprocess_msg">'+msg+'</span>'+'<br>'+inprocess_img+'</div>').css({
        'position':'absolute',
        'text-align':'center',
        'font-size':'22px','font-weight':'bold',
        'color':'white',
        'top':'50%','left':'50%',
        '-webkit-transform':'translate(-50%, -50%)',
        'opacity':'1',
        'z-index':'1000'
    }).appendTo($('#inprocess'));
}

 

隱藏

function inprocess_view_hide() {
    $('#inprocess').remove();
}

用法

顯示

    inprocess_view_show('連線中...');

隱藏

    inprocess_view_hide();