js控制div层的叠加简单方法

<style type="text/css"> .favorite_icon{float:left; padding: 0 0 0 30px;} .favorite_label{float:left; width:950px;} .favorite_label h2{ border-bottom: medium none;height: 60px;padding: 0.8em 0 0 0px;} .favorite_title{height:60px;margin:0px auto 12px auto;} .favorite_title a:link, .favorite_title a:visited {color: #333; background-color:#8bb65a;} .favorite_title a:hover {color: #333;text-decoration: none; background-color:#6c9541;} .add_favorite {border-radius: 0;color: #fff !important;font-family: "宋体","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px;line-height: 17px;padding: 5px 16px;float: right !important;border: medium none; height: 18px;background-image: none;cursor: pointer;display: inline-block;font-weight: 400;margin-bottom: 0; text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;} #favorite_count{color:#303030;font-size:12px;padding: 0 0 0 7px;} .favorite_list{clear:both; padding: 0 10px 200px 10px;} .list_type li{float:left;line-height: 17px;} .list_type a{text-decoration: none;font-size: 15px;} .list_type a:link {color: #6c9541;} .list_type a:visited{color: #333;} .list_type a:hover {color: #6c9541;text-decoration: none;} .list_line{clear:both;height:10px; margin-bottom:10px;border-bottom:1px groove #ccc;} .nums{font-weight:bold;} .t1{border-bottom:1px dotted #ccc;height: 40px;padding: 0.8em 0 0 30px;} .list_content{clear:both;} .list_content h3{float:left; width:763px;} .list_content a{text-decoration:none; display:block;font-family: "宋体","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px;color: #333; float:left; } .list_content a:link, .favorite_title a:visited {color:#333;text-decoration: none;} .list_content a:hover {color: #bb1c20;text-decoration: none; } .date{color:#ccc;font-size:13px;padding: 0 0 0 7px;float:left !important;text-align: center; vertical-align: middle;white-space: nowrap;text-decoration: none; } .edit{ margin: 0 0 0 20px;} .delete{ margin: 0 0 0 10px;} .black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%; background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.10;filter:alpha(opacity=80);} .white_content{display:none;position:absolute;top:15%;left:25%;width:500px;height:250px;padding:16px; border:1px solid #ccc;background-color:white;z-index:1002;overflow:auto;} .white_content a{float:right; color:#aca7a7;text-decoration: none;} .form-group{clear:both; margin:10px 0 10px 0;} .control-label{float:left; margin:10px 0 10px 30px;color:#aca7a7;} #url,#title{width:330px;height:23px;border:solid 1px #ccc; background:#f8f8f8;color:#8d8585;} .col-xs-9{float:left; margin:10px 0 10px 10px;} .btn-default,.btn-primary{float:right; width:80px;border-radius: 0;color: #fff !important; font-family: "宋体","Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 14px; padding: 5px 18px;text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;} .btn-default{border:solid 1px #ccc; background:#9a9a9a;color:#fff;margin:15px 20px 0 0;} .btn-default:hover {background:#8d8585;} .btn-primary{border:solid 1px #ccc; background:#8bb65a;color:#fff;margin:15px 78px 0 0;} .btn-primary:hover {background:#6c9541;} </style> <div> <div> <img src="https://127.0.0.1/phpcms/statics/images/favorite/favorite_icon_48_48.jpg"/> <h2>&nbsp;&nbsp;收藏<span>（n个）</span> <a href="javascript:void(0)">添加收藏</a> </h2> </div> </div> <div> <div> <ul> <li>&nbsp;<a href="#>全部(<span></span>)</a></li> <li>&nbsp;<a href="#">钢琴谱(<span></span>)</a></li> <li>&nbsp;<a href="#">钢琴曲(<span></span>)</a></li> </ul> </div> <div> </div> <div> <ul> {loop $info $r} <li> <a href="#" ><label>{$r[id]}</label> <h3>{$r[title]}</h3></a> <span>{date("Y-m-d",$r[inputtime])}</span> <a href="javascript:void(0)"> <img alt="编辑" src="https://127.0.0.1/phpcms/statics/images/favorite/edit.jpg"/></a> <a href="https://www.jb51.net/JavaScript:void(0)"> <img alt="删除" src="https://127.0.0.1/phpcms/statics/images/favorite/delete.jpg"/></a> </li> {/loop} <li>&nbsp; </li> </ul> </div> </div> </div> <div> <a href="javascript:void(0)"> <span>关闭</span></a> <br> <h2>添加收藏</h2> <div> <label for="url"><span>*</span>网址：</label> <div> <input type="text" value=" "/> </div> </div> <div> <label for="title"><span>*</span>标题：</label> <div> <input type="text" /> </div> </div> <div> <label for="title"><span>*</span>类别：</label> <div> <label > <input type="radio" value="钢琴谱" checked="checked"/><span>钢琴谱</span></label> <label><input type="radio" value="钢琴曲" /><span>钢琴曲</span></label> </div> </div> <div> <div> <input type="submit" value="收藏"/> <button type="button">取消</button> </div> </div> <script type="text/javascript"> //添加收藏 function add_shoucang() { document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; $("#title").val(''); $("#url").val('http://'); $("#shoucnag_id").val(''); $("input[name='radio'][value='钢琴谱']").attr("checked",true); } //删除 function ConfirmDel() { var _id; if(confirm('确定删除？')) { $('.navigation>li').click(function(){ var iVal = $(this).index(); $('.navigation>li').eq(iVal).hide(); }); } else { document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none' } } </script>