[HTML]自製簡易Lightbox Loading特效

在網路上常會看到許多當點擊後，四周畫面一黑，然後出現一些文字訊息方塊的特效

這種Lightbox Loading的效果，網路上有許多很完整的套件

但如果只是為了做個轉換的特效，可以自己快速做一個，不一定還要去引用其他套件

以下做個簡單的範例：
HTML

<div id="loading">
	<div class="wait-message">Loading......</div>
</div><!--end #loading -->

CSS

/* 黑底 */
#loading {
    z-index:10;
    background:#555;
    opacity: 0.5;
    position:absolute;
    top:0;
}

/* message */
#loading .wait-message {
    z-index:11;
    width:300px;
    height:50px;
    background:#000;
    position:absolute;
    text-align:center;
    border-radius:10px;
    color:#FFF;
    font-size:18px;
    padding-top:10px;
}

jQuery

$('#loading').css({width:$(window).width(),height:2300});

var wait_message = $('#loading .wait-message');
//以高為例，(瀏覽器高度 - 訊息區塊高度 / 2) + 捲軸上方高度
//用Math.max()避免負數(如果負數就取0)
wait_message.css({
	top      : Math.max(0,($(window).height() - wait_message.outerHeight()) / 2 + $(window).scrollTop()) + 'px',
	left     : Math.max(0,($(window).width() - wait_message.outerWidth()) / 2 + $(window).scrollLeft()) + 'px'
});