如何在具有滚动条的屏幕中心显示 loading.gif答案

【问题标题】：How to display loading.gif at the center of the screen which has a scrollbar如何在具有滚动条的屏幕中心显示 loading.gif
【发布时间】：2016-01-04 22:19:07
【问题描述】：

每当用户单击按钮时，我都会尝试显示 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？如果我向下滚动，我应该会在屏幕中心再次看到它。

【问题讨论】：

试试position:fixed。

标签： jquery css

【解决方案1】：

这是解决方案。 . 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');
});
});

【讨论】：

【解决方案2】：

在你的 CSS 中，尝试改变 position:absolute;位置：固定；

【讨论】：

【解决方案3】：

我曾经有这个 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>

FIDDLE EXAMPLE

【讨论】：

【解决方案4】：

变化：

#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;

收件人：

#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;

将 position 从 absolute 更改为 fixed

JSFiddle Demo

【讨论】：