Zi 字媒體

[HTML]自製簡易Lightbox Loading特效

2021/12/25

blogjohnsonluorg

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

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

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

以下做個簡單的範例：
HTML


	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'
});

Categories: CSSjQuery