容易的JS Loading弹出层
日期：2014-05-16 浏览次数：20312 次
简单的JS Loading弹出层
效果图：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
</head>
<script>
//层的id
var loadingDivId = "loading_div";
//创建或显示loading层
function showLoadingDiv()
{
var div = document.getElementById(loadingDivId);
if(!div)
{
div = document.createElement("DIV");
with(div)
{
id = loadingDivId;
//如果能搞个类似FF转动的小图片就更ok了。
innerHTML = "<br/><br/><br/><br/>Loading";
style.position = "absolute";
style.zIndex = "9999";
style.backgroundColor="#7B68EE";
style.width="210px";
style.height="200px";
style.top = "2";
style.left = "5";
style.textAlign="center";
//DIV透明度
style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
document.body.appendChild(div);
}
div.style.display="block";
}
//隐藏loading层
function hiddenLoadingDiv()
{
var div = document.getElementById(loadingDivId);
if(div)
div.style.display="none";
}
</script>
<body>
<input id="y" value="YHEF" />
<input type="button" id="openBtn" value="Open" onclick="showLoadingDiv();"/>
<span style="width:100px;"/>
<input type="button" id="hiddenBtn" value="Hidden" onclick="hiddenLoadingDiv();"/>
</body>
</html>
效果图：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
