Programmingjquery

화면 로딩바 구현

jquery

화면 로딩바 구현

화면의 Ajax의 로딩바를 구현하기 위해 처리

CSS –

1
2
3
4
5
/* 레이어 코드 부분 */
#mask{position: absolute; left: 0; top: 0; z-index: 10; background-color: #0074A3; display: none; opacity:0.2; filter:alpha(opacity=20);}
#mail_window {position: absolute;width: 126px;height: 122px;z-index: 20;display: none;}
#mail_window .loading_bar {width: 100px;height: 100px;margin: 0 auto;}
#mail_window .loading_bottom {width: 126px;height: 22px;}

JAVASCRIPT ——-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function wrapWindowByMask(){
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').css({'width': maskWidth,'height': maskHeight});
    $("#mask").show();
    var $layerObj = $("#mail_window");
    var left = ($(window).scrollLeft() + ($(window).width() - $layerObj.width()) / 2);
    var top = ($(window).scrollTop() + ($(window).height() - $layerObj.height()) / 2);
    $layerObj.css({'left' : left, 'top' : top, 'position' : 'absolute'});
    $layerObj.show();
}
/* Action */
wrapWindowByMask();
$("#mask, #mail_window").hide();

HTML ——–

1
<div id="mask"></div><div id="mail_window"><div class="loading_bar"><img src="/images/uaf/icon/ajax-loader.gif" width="100" height="100" alt="" /></div></div>

Share