我试图在用户单击按钮时显示 loading.gif/spinning wheel。 我在母版页中添加了一个如下所示的 div:
<div id="loadingDiv">
<div>
<h7>Please wait...</h7>
</div>
</div>
这是CSS:
#loadingDiv{
position:absolute;
top:0px;
right:0px;
width:100%;
height:100%;
background-color:#666;
background-image:url('ajax-loader.gif');
background-repeat:no-repeat;
background-position:center;
z-index:10000000;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
当我尝试这样做时，loading.gif 显示在页面的中央。但是由于页面真的很长，我必须滚动才能看到 loading.gif。
如何在可见的屏幕中央显示 loading.gif？ 如果我向下滚动，我应该会在屏幕中央再次看到它。
最佳答案
这是解决方案。 . JS FIDDLE DEMO
HTML
<body>
<div class="content">
Long Content Here
<br/>
Click to view loading image.
</div>
<div id="divLoading">
</div>
CSS
#divLoading
{
display : none;
}
#divLoading.show
{
display : block;
position : fixed;
z-index: 100;
background-image : url('http://loadinggif.com/images/image-selection/3.gif');
background-color:#666;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;
}
#loadinggif.show
{
left : 50%;
top : 50%;
position : absolute;
z-index : 101;
width : 32px;
height : 32px;
margin-left : -16px;
margin-top : -16px;
}
div.content {
width : 1000px;
height : 1000px;
}
jQuery
$(document).ready(function(){
$("div.content").click(function(){
$("div#divLoading").addClass('show');
});
});
关于jquery - 如何在有滚动条的屏幕中央显示 loading.gif，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24961121/