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

前端之家收集整理的这篇文章主要介绍了javascript – Jquery – 如何在显示加载图标的同时灰色显示背景前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
用户点击提交按钮并在灰色背景上显示加载图标时,我正在尝试灰色背景.

下面是图标试图显示,但是我无法显示动画,图标只是停留.

这是我的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();
});
原文链接:https://www.f2er.com/jquery/151637.html

猜你在找的jQuery相关文章