jQuery 如何在有滚动条的屏幕中央显示loading.gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24961121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display loading.gif at the center of the screen which has a scrollbar
提问by Vahi
I am trying to display loading.gif/spinning wheel whenever a user clicks the button. I have added a div as below in the master page:
每当用户单击按钮时，我都会尝试显示 loading.gif/spinning wheel。我在母版页中添加了如下 div：
<div id="loadingDiv">
<div>
<h7>Please wait...</h7>
</div>
</div>
This is the css:
这是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 */
}
When I try this, the loading.gif is displayed at the center of the page. But as the page is really long , I have to scroll in order to see the loading.gif.
当我尝试这个时，loading.gif 显示在页面的中心。但是由于页面真的很长，我必须滚动才能看到loading.gif。
How can I display the loading.gif at the center of the screen which is visible? And if I scroll down, I should see that again at the center of the screen.
如何在可见的屏幕中央显示loading.gif？如果我向下滚动，我应该会在屏幕中央再次看到它。
采纳答案by CoqPwner
in your CSS, try changing position:absolute; with position:fixed;
在你的 CSS 中，尝试改变 position:absolute; 带位置：固定；
回答by Ankit Singhania
Here's the solution. . JS FIDDLE DEMO
这是解决方案。. JS小提琴演示
HTML
HTML
<body>
<div class="content">
Long Content Here
<br/>
Click to view loading image.
</div>
<div id="divLoading">
</div>
CSS
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
jQuery
$(document).ready(function(){
$("div.content").click(function(){
$("div#divLoading").addClass('show');
});
});
回答by Ehsan Sajjad
I used to have this html and css and it always display in center whether my page is long or short:
我曾经有这个 html 和 css，无论我的页面是长还是短，它总是显示在中心：
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: rgb(102, 102, 102); z-index: 30001; opacity: 0.8;">
<p style="position: absolute; color: White; top: 50%; left: 45%;">
Loading, please wait...
<img src="images/ajax-loading.gif">
</p>
</div>
回答by imbondbaby
Change:
改变：
#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;
To:
到：
#loadingDiv{position:fixed;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;
Changed positionfrom absoluteto fixed
改变position来自absolute于fixed
