Javascript Jquery-如何在显示加载图标时使背景变灰
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28931791/
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
Jquery-How to grey out the background while showing the loading icon over it
提问by user1234
I'm trying to grey out the background when a user clicks on the submit button and show the loading icon over the greyed background.
当用户单击提交按钮并在灰色背景上显示加载图标时，我试图将背景变灰。
below is the icon im trying to show, however I'm not able to show the animation, the icon just stays still.
下面是我试图显示的图标，但是我无法显示动画，图标只是保持静止。
Here is my html:
这是我的 html：
<div class="container"></div>
<div id="loading-img" style=" z-index: 20;display:none;"></div>
<button id="button">Submit</button>
JS:
JS：
$("#button").click(function() {
$("#container").css("opacity",0.5);
$("#loading-img").css({"display": "block"});
}
I'm not sure how exactly to use the css for making the icon animate over the grey background. Any ideas please?? EDIT::::
我不确定如何准确地使用 css 使图标在灰色背景上具有动画效果。请问有什么想法吗？？编辑：：：：
Fiddle: http://jsfiddle.net/hnk6bLbt/1/
小提琴：http: //jsfiddle.net/hnk6bLbt/1/
Thanks!
谢谢！
回答by Michael P. Bazos
I reworked the example you provided in the js fiddle : http://jsfiddle.net/zravs3hp/
我重新编写了您在 js fiddle 中提供的示例：http: //jsfiddle.net/zravs3hp/
Step 1 :
第1步 ：
I renamed your containerdiv to overlay, as semantically this div is not a container, but an overlay. I also placed the loader div as a child of this overlay div.
我将您的containerdiv重命名为overlay，因为在语义上这个 div 不是一个容器，而是一个叠加层。我还将加载器 div 作为此叠加 div 的子级。
The resulting html is :
生成的 html 是：
<div class="overlay">
<div id="loading-img"></div>
</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>
<button id="button">Submit</button>
</div>
The css of the overlay is the following
叠加层的css如下
.overlay {
background: #e9e9e9; <- I left your 'gray' background
display: none; <- Not displayed by default
position: absolute; <- This and the following properties will
top: 0; make the overlay, the element will expand
right: 0; so as to cover the whole body of the page
bottom: 0;
left: 0;
opacity: 0.5;
}
Step 2 :
第2步 ：
I added some dummy text so as to have something to overlay.
我添加了一些虚拟文本以便覆盖一些内容。
Step 3 :
第 3 步：
Then, in the clickhandler we just need to showthe overlay :
然后，在click处理程序中，我们只需要显示覆盖：
$("#button").click(function () {
$(".overlay").show();
});
回答by cssyphus
Note: There is no magic to animating a gif: it is either an animated gif or it is not. If the gif is not visible, very likely the path to the gif is wrong - or, as in your case, the container (div/p/etc) is not large enough to display it. In your code sample, you did not specify height or width and that appeared to be problem.
注意：动画 gif 没有魔法：它要么是动画 gif，要么不是。如果 gif 不可见，则 gif 的路径很可能是错误的 - 或者，在您的情况下，容器 (div/p/etc) 不够大，无法显示它。在您的代码示例中，您没有指定高度或宽度，这似乎是个问题。
If the gif is displayed but not animating, see reference links at very bottom of this answer.
如果 gif 显示但没有动画，请参阅此答案最底部的参考链接。
Displaying the gif + overlay, however, is easier than you might think.
然而，显示 gif + 叠加层比您想象的要容易。
All you need are two absolute-position DIVs: an overlay div, and a div that contains your loading gif. Both have higher z-index than your page content, and the image has a higher z-index than the overlay - so they will display above the page when visible.
您只需要两个绝对位置 DIV：一个覆盖 div 和一个包含加载 gif 的 div。两者的 z-index 都高于您的页面内容，并且图像的 z-index 高于覆盖层 - 因此它们会在可见时显示在页面上方。
So, when the button is pressed, just unhide those two divs. That's it!
因此，当按下按钮时，只需取消隐藏这两个 div。就是这样！
$("#button").click(function() {
$('#myOverlay').show();
$('#loadingGIF').show();
setTimeout(function(){
$('#myOverlay, #loadingGIF').fadeOut();
},2500);
});
/* Or, remove overlay/image on click background... */
$('#myOverlay').click(function(){
$('#myOverlay, #loadingGIF').fadeOut();
});body{font-family:Calibri, Helvetica, sans-serif;}
#myOverlay{position:absolute;top:0;left:0;height:100%;width:100%;}
#myOverlay{display:none;backdrop-filter:blur(4px);background:black;opacity:.4;z-index:2;}
#loadingGIF{position:absolute;top:10%;left:35%;z-index:3;display:none;}
button{margin:5px 30px;padding:10px 20px;}<div id="myOverlay"></div>
<div id="loadingGIF"><img src="http://placekitten.com/150/80" /></div>
<div id="abunchoftext">
Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious routine of forgotten code... While I nodded, nearly napping, suddenly there came a tapping... as of someone gently rapping - rapping at my office door. 'Tis the team leader, I muttered, tapping at my office door - only this and nothing more. Ah, distinctly I remember it was in the bleak December and each separate React print-out lay there crumpled on the floor. Eagerly I wished the morrow; vainly I had sought to borrow from Stack-O surcease from sorrow - sorrow for my routine's core. For the brilliant but unworking code my angels seem to just ignore. I'll be tweaking code... forevermore! - <a href="http://www.online-literature.com/poe/335/" target="_blank">Apologies To Poe</a></div>
<button id="button">Submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>Update:
更新：
You might enjoy playing with the new backdrop-filter:blur(_px)css property that gives a blur effect to the underlying content, as used in above demo... (As of April 2020: works in Chrome, Edge, Safari, Android, but not yet in Firefox)
您可能会喜欢使用新的backdrop-filter:blur(_px)css 属性，该属性为基础内容提供模糊效果，如上述演示中所用... （截至 2020 年 4 月：适用于 Chrome、Edge、Safari、Android，但尚未适用于 Firefox）
References:
参考：
http://www.paulirish.com/2007/animated-gif-not-animating/
http://www.paulirish.com/2007/animated-gif-not-animating/
Animated GIF while loading page does not animate
https://wordpress.org/support/topic/animated-gif-not-working
https://wordpress.org/support/topic/animated-gif-not-working
回答by lshettyl
1) "container" is a class and not an ID 2) .container - set z-index and display: none in your CSS and not inline unless there is a really good reason to do so. Demo@fiddle
1) "container" 是一个类而不是一个 ID 2) .container - 在你的 CSS 中设置 z-index 和 display: none 并且不内联，除非有很好的理由这样做。演示@小提琴
$("#button").click(function() {
$(".container").css("opacity", 0.2);
$("#loading-img").css({"display": "block"});
});
CSS:
CSS：
#loading-img {
background: url(http://web.bogdanteodoru.com/wp-content/uploads/2012/01/bouncy-css3-loading-animation.jpg) center center no-repeat; /* different for testing purposes */
display: none;
height: 100px; /* for testing purposes */
z-index: 12;
}
And a demo with animated image.
