<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("h4"); 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 /> <h4><a href="http://www.baidu.com">点我百度一下</a></h4><br /> <input type="button" value="打开遮罩层后就不能点击了" onclick="sAlert('测试弹出框并加上锁屏效果')" /><br /><br /> <a href="index.html">返回首页</a> </body>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
