<title>折叠菜单</title>
<script type="text/javascript" src="dtree.js"></script>
</head>
<script type="text/javascript">
//dtree 目录树结构
var d = new dTree("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 />
<a href="javascript:d.openAll()">展开全部</a> || <a href="javascript:d.closeAll()">折叠全部</a>
</body>
<title>登陆锁屏效果</title>
</head>
<script type="text/javascript">
function sAlert(str){
//alert(str);
//创建遮罩层
var bgObj = document.createElement("div");
bgObj.id = "div1";
bgObj.style.position = "absolute"; //定位
bgObj.style.top = "0"; //距离顶部的距离
bgObj.style.left = "0"; //距离左边的距离 ，与上面2行一起完成全屏遮罩
bgObj.style.border = "1px solid #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"; //IE9 firefox 下的透明度设置
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; // ie 低版本下的代码
bgObj.style.zIndex = 1000; // 层的堆叠顺序，序号大的，就堆叠在上面
document.body.appendChild(bgObj);
//创建弹窗框
var mObj = document.createElement("div");
//alert(mObj);
mObj.id = "div2";
//边框 大小
mObj.style.border = "1px solid #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);
//添加消息层 -- 关闭按钮执行动作层
var title = document.createElement("h3");
title.id = "title";
title.align = "right";
title.innerHTML = "关闭";
title.style.border = "1px solid #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);
//最后子啊消息层里添加页面内容
var pInfo = document.createElement("p");
pInfo.align = "center";
//添加内容
pInfo.innerHTML = "这里是你的网页代码<br /><br />";
pInfo.innerHTML += "用户名：<input type=‘text‘ name=‘username‘><br />";
pInfo.innerHTML += "密 码：<input type=‘password‘ name=‘password‘><br /><br />";
pInfo.innerHTML += "<input type=‘submit‘ name=‘submit‘ value=‘体交呗‘>";
mObj.appendChild(pInfo);
}
</script>
<body>
这里是JS 登陆效果的DEMO 页面<br />
<h3><a href="http://www.baidu.com">点我百度一下</a></h3><br />
<input type="button" value="打开遮罩层后就不能点击了" onclick="sAlert(‘测试弹出框并加上锁屏效果‘)" /><br /><br />
<a href="index.html">返回首页</a>
</body>本文出自 “方向感” 博客，请务必保留此出处http://itech.blog.51cto.com/192113/1562102
原文地址：http://itech.blog.51cto.com/192113/1562102
