这篇博客介绍了一种利用JavaScript和CSS实现全局Modal加载页面的方法。通过设置`coverInitBody`类实现全屏遮罩层，并用GIF加载动画提供加载反馈。在页面加载完成后，Modal会在3秒后自动消失，同时解除页面滚动锁定。
<style>
.coverInitBody {
position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #FEFEFE;
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;
}
</style>
<div id='coverInitBody' class='coverInitBody'> <div id="coverInitBody222" > </div> </div>
<script>
function showMask(){
$('body').css("overflow","hidden")
$("#coverInitBody").show();
}
$(document).ready(function(){
var tempHeight = (($(document).height())/2)-100 ;
var tempWidth = ((window.screen.availWidth)/2)-100 ;
$("#coverInitBody222").attr("style","background: url( '/resources/images/loading_.gif' );width:250px;heig
.coverInitBody {
position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #FEFEFE;
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;
}
</style>
<div id='coverInitBody' class='coverInitBody'> <div id="coverInitBody222" > </div> </div>
<script>
function showMask(){
$('body').css("overflow","hidden")
$("#coverInitBody").show();
}
$(document).ready(function(){
var tempHeight = (($(document).height())/2)-100 ;
var tempWidth = ((window.screen.availWidth)/2)-100 ;
$("#coverInitBody222").attr("style","background: url( '/resources/images/loading_.gif' );width:250px;heig
最低0.47元/天 解锁文章
扫一扫
875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
