页面用一个遮罩层显示加载,加载完后隐藏该div

<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; "><img src="/content/5-121204194109.gif"></div>   
.progressBar {
        display: block;
        width: 65px;
        height: 65px;
        top: 50%;
        left: 50%;
        margin-left: -74px;
        margin-top: -14px;
        padding: 10px;
        text-align: left;
        line-height: 27px;
        font-weight: bold;
        position: fixed;
        z-index: 2001;
    }

    .background {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        filter: alpha(opacity=40);
        background: white;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
        background-color: #666666;
    }   
 var ajaxbg = $("#background, #progressBar");
        ajaxbg.hide();
        $(document).ajaxStart(function () {
            ajaxbg.show();
        }).ajaxStop(function () {
            ajaxbg.hide();
        });

原文地址:https://www.cnblogs.com/lunawzh/p/10226682.html

时间: 2024-10-26 01:31:56

页面用一个遮罩层显示加载,加载完后隐藏该div的相关文章

在弹窗中新建一个遮罩层

一.mask-div 在原来页面弹出一个弹窗后,鼠标还是可以点击页面其他地方,所以我要给页面弹出一个遮罩层,把页面所有东西都遮住,不给用户点击除了弹窗之外的东西. 实现后的效果: 当我点击“添加”按钮时,会弹出两个层,一个是下面的遮罩层(一个我们看到的黑色半透明的遮住全屏幕的div),另一个就是我们要填写信息的弹窗. 二.设置遮罩层样式  要实现遮住全屏,可以这样来设置属性,兼容FF.chrome #mask-div{background-color:black; position:fixed;

CSS创建一个遮罩层

.layer{ width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -moz-opacity: 0; filter: alpha(opacity=50); z-index: 99; height: 100%; margin:0 auto; } 创建一个遮罩层. CSS创建一个遮罩层

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>DIV CSS遮罩层</title

Jquery实现按钮点击遮罩加载,处理完后恢复

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

前端页面给指定的div添加遮罩层,并且带有加载中的小旋转图片

话不多说,先上代码,其实还是比较简单的 1 $("<div id='shade' style='opacity:0.85;background:white'></div><img src='${ctx}/static/images/loading2.gif'/>").css({ 2 position:'absolute', 3 top:0, 4 left:0, 5 zIndex:300, 6 height:'100%', 7 width:'100%'

根据juery CSS点击一个标签弹出一个遮罩层的简单示例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JS/JavaScript/jq

小程序遮罩层禁止页面滚动(遮罩层内部可以滚动)

wxml //使用scroll-view包裹 scrolly-y要写 [scroll-view scroll-y class="mask-box" catchtouchmove='ture'] [view class="box"] [view] [scroll-view] wxss //样式 .mask-box{ width: 300rpx; height: 300rpx; position: fixed; top: 50%; left: 50%; margin-t