javascript – Jquery – 如何在显示加载图标的同时灰色显示背景

<div class="container"></div>
 <div id="loading-img" style=" z-index: 20;display:none;"></div>
 <button id="button">Submit</button>

$("#button").click(function() {
    $("#container").css("opacity",0.5);
    $("#loading-img").css({"display": "block"});
}

我修改了你在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();
});