<title>折叠菜单</title><scripttype="text/javascript"src="dtree.js"></script></head><scripttype="text/javascript">//dtree目录树结构vard=newdTree("d");d.add(0,-1,"根目录");d.add(1,0,"一级目录1");d.add(2,0,"一级目录2");d.add(3,0,"一级目录3");d.add(4,0,"一级目录4");d.add(5,2,"二级目录2");d.add(6,4,"二级目录4");d.add(7,4,"二级目录4");d.add(8,7,"三级目录4");d.add(9,8,"demo站点登陆锁屏效果","demo.html");document.write(d);</script><body><br/><ahref="javascript:d.openAll()">展开全部</a>||<ahref="javascript:d.closeAll()">折叠全部</a></body><title>登陆锁屏效果</title></head><scripttype="text/javascript">functionsAlert(str){//alert(str);//创建遮罩层varbgObj=document.createElement("div");bgObj.id="div1";bgObj.style.position="absolute";//定位bgObj.style.top="0";//距离顶部的距离bgObj.style.left="0";//距离左边的距离，与上面2行一起完成全屏遮罩bgObj.style.border="1pxsolid#f00";//边框bgObj.style.background="#44eeff";//背景色//bgObj.style.width="100%";//宽度的另一种表示方式bgObj.style.width=document.body.offsetWidth+"px";//bgObj.style.height="100%";//高度的另一种表示方式bgObj.style.height=screen.height+"px";//alert(bgObj.style.width);//alert(bgObj.style.height);bgObj.style.opacity="0.1";//IE9firefox下的透明度设置bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie低版本下的代码bgObj.style.zIndex=1000;//层的堆叠顺序，序号大的，就堆叠在上面document.body.appendChild(bgObj);//创建弹窗框varmObj=document.createElement("div");//alert(mObj);mObj.id="div2";//边框大小mObj.style.border="1pxsolid#ff0000";mObj.style.width="450px";mObj.style.height="250px";mObj.style.background="#efefef";//定位mObj.style.position="absolute";mObj.style.top="35%";mObj.style.left="30%";//堆叠顺序mObj.style.zIndex=1001;document.body.appendChild(mObj);//添加消息层--关闭按钮执行动作层vartitle=document.createElement("h4");title.id="title";title.align="right";title.innerHTML="关闭";title.style.border="1pxsolid#dfdffd";title.style.background="#c5c5c5";title.style.margin="0";//定位距离消息框顶部的距离title.onclick=function(){//alert(11212);document.body.removeChild(bgObj);//先删除背景遮罩层对象mObj.removeChild(title);//再删除本消息层对象document.body.removeChild(mObj);//最后删除弹窗框对象}mObj.appendChild(title);//最后子啊消息层里添加页面内容varpInfo=document.createElement("p");pInfo.align="center";//添加内容pInfo.innerHTML="这里是你的网页代码<br/><br/>";pInfo.innerHTML+="用户名：<inputtype='text'name='username'><br/>";pInfo.innerHTML+="密　码：<inputtype='password'name='password'><br/><br/>";pInfo.innerHTML+="<inputtype='submit'name='submit'value='体交呗'>";mObj.appendChild(pInfo);}</script><body>这里是JS登陆效果的DEMO页面<br/><h4><ahref="http://www.baidu.com">点我百度一下</a></h4><br/><inputtype="button"value="打开遮罩层后就不能点击了"onclick="sAlert('测试弹出框并加上锁屏效果')"/><br/><br/><ahref="index.html">返回首页</a></body>