这里运用div+css的体式格局,加载中的图片是网上下载的动图,人人能够依据本身的须要举行修正。
(引荐教程:html教程)
完成代码:
DIV CSS遮罩层function showdiv() {
document.getElementById("bg").style.display ="block";
/* document.getElementById("show").style.display ="block";*/
}
function hidediv() {
document.getElementById("bg").style.display ='none';
/*document.getElementById("show").style.display ='none';*/
}
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
/*遮罩图片居中显现*/
.zhezhao{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
结果:
以上就是html增加遮罩结果的细致内容,更多请关注ki4网别的相干文章!
收藏 | 0