您的位置：首页 > Web前端 > JavaScript

html页面中js添加遮盖层实现等待效果

2015-07-03 17:34 627 查看

<html>

<head>

<title>遮罩层</title>

<meta charset="gb2312" />

<style>

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

}

</style>

<script>

function coverit()

{

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

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

cover.style.display = 'block';

covershow.style.display = 'block';

setTimeout("showTime()",3000);

}

function showTime(){

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

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

cover.style.display = '';

covershow.style.display = '';

}

</script>

</head>

<body>

<div id="cover"></div>

<div id="coverShow">

<table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; height: 100px; min-height: 100px;" bgcolor="#127386">

<tr>

<td height="30" style="font-size: 12px;">正在加载，请稍后......</td>

</tr>

<tr>

<td align="center" bgcolor="#ffffff">

<img src="ajax-loader.gif"/>

</td>

</tr>

</table>

</div>

<input type="button" value="遮住" onclick="coverit()"/>

</body>

<html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航