<!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> <mce:style type="text/css"><!-- .avatarbackground { background-color: #F5F5F5; } * html .avatarlist { height: 1%; } .avatarlist { overflow: hidden; padding: 5px 0; } .avatarlist { background: #fff; padding: 10px; border: 1px solid #999; border-bottom: 0; width: 450px; height: 400px; overflow-y:auto; overflow-x:hidden; } .avatarlist li { list-style: none; float: left; width: 24%; margin: 0 1px; height: 120px; } .avatarbutton { display: block; position: absoulte; left: 0px; bottom: 0px; text-align: center; border: 1px solid #999; border-top: 0; padding: 5px 0; } --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- .avatarbackground { background-color: #F5F5F5; } * html .avatarlist { height: 1%; } .avatarlist { overflow: hidden; padding: 5px 0; } .avatarlist { background: #fff; padding: 10px; border: 1px solid #999; border-bottom: 0; width: 450px; height: 400px; overflow-y:auto; overflow-x:hidden; } .avatarlist li { list-style: none; float: left; width: 24%; margin: 0 1px; height: 120px; } .avatarbutton { display: block; position: absoulte; left: 0px; bottom: 0px; text-align: center; border: 1px solid #999; border-top: 0; padding: 5px 0; } --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">.avatarbackground { background-color: #F5F5F5; } * html .avatarlist { height: 1%; } .avatarlist { overflow: hidden; padding: 5px 0; } .avatarlist { background: #fff; padding: 10px; border: 1px solid #999; border-bottom: 0; width: 450px; height: 400px; overflow-y:auto; overflow-x:hidden; } .avatarlist li { list-style: none; float: left; width: 24%; margin: 0 1px; height: 120px; } .avatarbutton { display: block; position: absoulte; left: 0px; bottom: 0px; text-align: center; border: 1px solid #999; border-top: 0; padding: 5px 0; }</style> <mce:script language="javascript" type="text/javascript"><!-- function $(id){ return document.getElementById(id); } function BOX_show(e){//显示 if(document.getElementById(e)==null){return;} BOX_layout(e); window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置 window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置 } function BOX_remove(e){//移除 window.onscroll = null; window.onresize = null; document.getElementById('BOX_overlay').style.display="none"; document.getElementById(e).style.display="none"; } function BOX_layout(e){//调整位置 var a = document.getElementById(e); if (document.getElementById('BOX_overlay')==null){ //判断是否新建遮掩层 var overlay = document.createElement("div"); overlay.setAttribute('id','BOX_overlay'); overlay.οnclick=function(){BOX_remove(e);}; a.parentNode.appendChild(overlay); } //取客户端左上坐标,宽,高 var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); var clientWidth; // if (window.innerWidth) { // clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth)); // } else { clientWidth = document.documentElement.clientWidth; // } var clientHeight; // if (window.innerHeight) { // clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight)); // } else { clientHeight = document.documentElement.clientHeight; // } var bo = document.getElementById('BOX_overlay'); bo.style.left = scrollLeft+'px'; bo.style.top = scrollTop+'px'; bo.style.width = clientWidth+'px'; bo.style.height = clientHeight+'px'; bo.style.display=""; //Popup窗口定位 a.style.position = 'absolute'; a.style.zIndex=101; a.style.display=""; a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px'; a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px'; } // --></mce:script> <mce:script type="text/javascript"><!-- function usethisavatar(e){ var avatars = $('fromsystem').getElementsByTagName('div'); for (var i=0; i < avatars.length;i++){ avatars[i].style.border = "2px dashed white"; } e.parentNode.style.border = "2px dashed black"; } function selectionborder(e){ if (e.style.border != "2px dashed black" && e.style.border != "black 2px dashed"){ if (e.style.border == "2px dashed red" || e.style.border == "red 2px dashed" ){ e.style.border = "2px dashed white"; } else{ e.style.border = "2px dashed red"; } } } // --></mce:script> </head> <body> <div id="BOX_overlay" style="background: #000; position: absolute; z-index:100; filter:alpha(opacity=50);-moz-opacity: 0.6;opacity: 0.6;" mce_style="background: #000; position: absolute; z-index:100; filter:alpha(opacity=50);-moz-opacity: 0.6;opacity: 0.6;"></div> <button οnclick="BOX_show('fromsystem');">显示</button> <div id="fromsystem" class="avatarbackground" style="display:none;position: relative;" mce_style="display:none;position: relative;"> <div class="avatarlist"> <ul> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/0.gif" mce_src="avatars/common/0.gif" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/1.jpg" mce_src="avatars/common/1.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/10.jpg" mce_src="avatars/common/10.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/11.jpg" mce_src="avatars/common/11.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/12.jpg" mce_src="avatars/common/12.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/13.jpg" mce_src="avatars/common/13.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/14.jpg" mce_src="avatars/common/14.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/2.jpg" mce_src="avatars/common/2.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/3.jpg" mce_src="avatars/common/3.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/4.jpg" mce_src="avatars/common/4.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/5.jpg" mce_src="avatars/common/5.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/6.jpg" mce_src="avatars/common/6.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/7.jpg" mce_src="avatars/common/7.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/8.jpg" mce_src="avatars/common/8.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> <li> <div οnmοuseοver="selectionborder(this)" οnmοuseοut="selectionborder(this)" style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" mce_style=" border: 2px dashed white; cursor: pointer; overflow:hidden; zoom:1;" ><img src="avatars/common/9.jpg" mce_src="avatars/common/9.jpg" οnclick="usethisavatar(this);" alt="形象图名称"/></div> </li> </ul> </div> <span class="avatarbutton"> <input type="button" name="userthisavatar" id="userthisavatar" value="确定" οnclick="BOX_remove('fromsystem');" /> <input type="button" name="canceluserthisavatar" id="canceluserthisavatar" value="取消" οnclick="BOX_remove('fromsystem');" /> </span> </div> </body> </html>