html弹出一个遮罩层有正在加载效果,弹出一个遮罩层有正在加载效果的文字

实现：

复制代码代码如下:

遮罩层

#cover{

display:none;

position:fixed;

z-index:1;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0, 0, 0, 0.44);

}

#coverShow{

display:none;

position:fixed;

z-index:2;

top:50%;

left:50%;

border:1px solid #127386;

width:300px;

height:100px;

margin-left:-150px;

margin-top:-150px;

background:#127386;

}

function clickfunc()

{

alert("clicked, 遮住之前’测试‘按钮是起作用的");

}

function coverit()

{

var cover = document.getElementById("cover");

var covershow = document.getElementById("coverShow");

cover.style.display = 'block';

covershow.style.display = 'block';

alert("已经遮住，’测试‘按钮已经不起作用了");

}

正在加载，请稍后......

这里加载一个img src为动态的gif

这里面是内容

所有的内容都被cover遮住

两个遮罩层

第一个遮罩层cover是将整个body盖住，width=100%,height=100%.

第二个遮罩层coverShow居中显示，可以在里面加载img元素。