html 页面透明提示,html DIV透明黑色浮层 提示加载中

遮罩层 #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%;
遮罩层

#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%;

width:300px;

height:100px;

margin-left:-150px;

margin-top:-150px;

}

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("已经遮住,’测试‘按钮已经不起作用了");

}

加载中...

这里面是内容

所有的内容都被cover遮住

两个遮罩层

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

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

效果:

7e4a5f1108db9ebf8b52ac23a134b65e.png

3cc123dd8758d87dfa3ba8e3c7d2e9ae.png