建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > Javascript/Ajax

javascript实现div层的关闭与隐藏显示

来源:建站教学网  时间:2012-02-10 15:16:02

本文章举办两个简单的实例告诉你如何来实例关于隐藏与显示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>

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号