当用户点击提交按钮并在灰色背景上显示加载图标时,我正在尝试灰色背景.
这是我的html：
<div class="container"></div> <div id="loading-img" style=" z-index: 20;display:none;"></div> <button id="button">Submit</button>
JS：
$("#button").click(function() {
$("#container").css("opacity",0.5);
$("#loading-img").css({"display": "block"});
}
我不知道如何使用CSS在灰色背景上制作图标.有什么想法吗？
编辑：：：：
小提琴：http://jsfiddle.net/hnk6bLbt/1/
谢谢！
解决方法
我修改了你在js小提琴中提供的例子：
http://jsfiddle.net/zravs3hp/
步骤1 ：
我将您的容器div重命名为overlay,因为语义上你不是容器,而是覆盖层.我也把加载器作为这个叠加的小孩.
所得到的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>
覆盖层的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;
}
第2步 ：
我添加了一些虚拟文本,以便有东西要叠加.
步骤3：
然后,在点击处理程序中,我们只需要显示叠加层：
$("#button").click(function () {
$(".overlay").show();
});
