`

遮罩层效果

overlay遮罩层 
阅读更多

实现遮罩层效果需要注意的地方

1、背景层需要设置为透明


2、背景层需要占据整个屏幕


下面是具体的代码 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>


.content{
	width: 300px;
	height: 150px;
	overflow:auto; 
	border:2px solid #ccc; 
	background-color:#fff; 
	position:absolute; 
	top:50%; 
	left:50%; 
	margin-top: -75px;
	margin-left: -150px;
	z-index:1001;
	word-wrap: break-word; 
	padding:3px;
}

.loading-mask{
	width: 100%;
	height: 100%;
	position: fixed;
	opacity:0.3; 
	filter: alpha(opacity=30); 
	background-color:#000;
	left: 0px;
	top: 0px;
}
</style>

<title></title>
</head>

<body>
	<div class="loading-mask">
		<div class="content">
			
			<div style="color: white;font-size: 20px;">正在努力加载中...</div>
		</div>
	</div>
	
</body>

</html>
1
顶
5
踩
分享到：
| javascript 实现购物车
评论
1 楼 留下的祝福 2013-06-21  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>J2EE专家交流高级群：245502605</TITLE>
<script>
window.onload=function loads(){
var isCs=window.confirm("确定提交?");
if(isCs){
invoke();
document.getElementById('doing').style.visibility='visible';
}else{
document.getElementById('doing').style.visibility='hidden';
}
}
var num=1;
function count(){
num++;
if(num==6){
num=1;
}
var str="";
for(i=0;i<num;i++){
str+=" . ";
}
document.getElementById('loading').innerHTML=str;
}

function invoke(){
setInterval("count()",200);
}
</script>
</HEAD>
<BODY>
  <div id="doing" runat="server" style="Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%;visibility:hidden;">
             <table width="100%" height="100%">
                 <tr align="center" valign="middle">
                     <td>
                         <table width="169" height="62" bgcolor="#66FFFF" style="FILTER: Alpha(Opacity=75); WIDTH: 169px; HEIGHT: 62px">
                             <tr align="center" valign="middle">
                                 <td>正在提交，请稍后……<br/>
                                 <code id="loading"></code></td>
                             </tr>
                         </table>
                     </td>
                 </tr>
             </table>
         </div>

</BODY>
</HTML>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics