本文章举办两个简单的实例告诉你如何来实例关于隐藏与显示div层及关闭层与隐藏的区别分析哦，有需要的同学可以参考一下本文章。
先来看一个最简单的实例,这个可以实现显示和隐藏层
| 代码如下 |
|
|
<div id="text"></div><input type="button" onclick="display('text')" />
function $_(id){
return document.getElementById(id);
};
function display(x){
$(x).style.display=($(x).style.display=="none")?"":"none";
};
|
下面是关闭层，其实原理 是一样的只是加了个效果。
| 代码如下 |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ position:relative;}
.wang{ width:100%; height:100%; background:#CCC; display:none; z-index:10; position:fixed; top:0px; left:150px; margin:0 auto; left:inherit; padding:0;filter:alpha(opacity=60); /* 针对IE浏览器的透明度 */
opacity:0.6; /* 针对FF浏览器的透明度 */}
.wang ul{ width:100px; height:100px; margin:0 auto;}
</style>
</head>
<body>
<a onclick="dianji()">弹出</a><input type="text" />
<div class="wang" id="xian" onclick="guanbi()"><ul><form><label>姓名</label><input id="wangyan" type="text" /><br /><label>密码</label><button style="width:100px; height:100px;" onclick="guanbi(this)">关闭</button></form></ul></div>
<script type="text/javascript">
function dianji(){
x=document.getElementById("xian");
x.style.display="block";
return false;
}
function guanbi(name){
var c=document.getElementById("wangyan").value;
if(c==3){
x.style.display='none';
return false;
}
}
</script>
</body>
</html>
|
