可拖动的圆角遮罩层

 

在烈火网看到的可拖动的遮罩圆角<css实现>层，留下来！

 

<html> <title>点击弹出div圆角的遮罩层,可关闭可移动 - Liehuo.net</title> <mce:style><!-- body{ margin:0px; padding:0px; font-size:14px; } #t { position:absolute; float:left; left:0px; top:0px; } #a { float:left; } .al { opacity: 0.80; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100); } .al2{ opacity: 0.00; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100); } U { DISPLAY: block; OVERFLOW: hidden; HEIGHT: 1px } U.f1 { background-color:#5cc; BACKGROUND: #5cc; MARGIN: 0px 3px } U.f2 { background-color:#5cc; BORDER-RIGHT: #5cc 2px solid; MARGIN: 0px 1px; BORDER-LEFT: #5cc 2px solid } U.f3 { background-color:#5cc; BORDER-RIGHT: #5cc 1px solid; MARGIN: 0px 1px; BORDER-LEFT: #5cc 1px solid } .d_top{ clear:both; overflow:hidden; background-color:#5cc; height:29px; vertical-align:bottom; } .d_top a{ float:right; margin-top:5px; margin-right:13px; padding-top:3px; width:18px; color:red; background-color:#789; text-decoration:none; font-weight:bold; text-align:center; vertical-align:middle; } .d_top span{ float:left; font-size:13px; margin-left:15px; margin-top:8px; } .d_body { BORDER-RIGHT: #5cc 3px solid; BORDER-LEFT: #5cc 3px solid; padding:10px; height:200px; background-color:#fff; } .d_foot{ clear:both; overflow:hidden; background-color:#5cc; height:2px; } --></mce:style><style mce_bogus="1">body{ margin:0px; padding:0px; font-size:14px; } #t { position:absolute; float:left; left:0px; top:0px; } #a { float:left; } .al { opacity: 0.80; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100); } .al2{ opacity: 0.00; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100); } U { DISPLAY: block; OVERFLOW: hidden; HEIGHT: 1px } U.f1 { background-color:#5cc; BACKGROUND: #5cc; MARGIN: 0px 3px } U.f2 { background-color:#5cc; BORDER-RIGHT: #5cc 2px solid; MARGIN: 0px 1px; BORDER-LEFT: #5cc 2px solid } U.f3 { background-color:#5cc; BORDER-RIGHT: #5cc 1px solid; MARGIN: 0px 1px; BORDER-LEFT: #5cc 1px solid } .d_top{ clear:both; overflow:hidden; background-color:#5cc; height:29px; vertical-align:bottom; } .d_top a{ float:right; margin-top:5px; margin-right:13px; padding-top:3px; width:18px; color:red; background-color:#789; text-decoration:none; font-weight:bold; text-align:center; vertical-align:middle; } .d_top span{ float:left; font-size:13px; margin-left:15px; margin-top:8px; } .d_body { BORDER-RIGHT: #5cc 3px solid; BORDER-LEFT: #5cc 3px solid; padding:10px; height:200px; background-color:#fff; } .d_foot{ clear:both; overflow:hidden; background-color:#5cc; height:2px; }</style> <mce:script type="text/javascript"><!-- function $(id){return document.getElementById(id);} function show(id){ var t = $(id); t.style.width=document.body.clientWidth; t.style.height=document.body.clientHeight; window.onresize=function(){ t.style.width=document.body.clientWidth; t.style.height=document.body.clientHeight; } $(id).style.display=""; } function cl(id){ $(id).style.display="none"; } //------------------------------------------------------------------------------- function moveEvent(e,id){ var isIE = (document.all)?true:false; //navigator.userAgent.toLowerCase().indexOf("msie") != -1; //var event=window.event||event; drag = true; xx=isIE?event.x:e.pageX; yy=isIE?event.y:e.pageY; L = document.getElementById(id).offsetLeft; T = document.getElementById(id).offsetTop; document.onmousemove = function(e) { if (drag) { x=isIE?event.x:e.pageX; if(x<0)x=0; y=isIE?event.y:e.pageY; if(y<0)y=0; document.getElementById(id).style.left = L-xx+x; document.getElementById(id).style.top = T-yy+y; } } document.onmouseup=function(){ drag = false; } } window.onscroll=function(){ $("back_div").style.width=document.body.scrollWidth; $("back_div").style.height=document.body.scrollHeight; } // --></mce:script> <body> <br /> <div id="a" style="position:absolute; left:300px; top:200px;"> <a href="javascript:" mce_href="javascript:" onClick="show('t')">点这里查看效果</a> </div> <div id="t" style="display:none;" mce_style="display:none;"> <div style="width:100%;height:100%; z-index:-1; position:absolute; float:left; background-color:#555;overflow:hidden;" class="al" id="back_div"> <iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe> </div> <DIV style="WIDTH: 500px; position:absolute;float:left;top:25%; left:30%; z-index:999; clear:both; overflow:hidden;" id="t_div"> <iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe> <U class="f1"></U><U class="f2"></U><U class="f3"></U> <div class="d_top" onMouseDown="moveEvent(event,'t_div')"> <span>欢迎来到烈火网——网页特效</span> <a href="javascript:" mce_href="javascript:" onClick="cl('t')">×</a> </div> <DIV class="d_body" >烈火网（liehuo.net）以提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习网站。 </DIV> <div class="d_foot"></div> <U class="f3"></U><U class="f2"></U><U class="f1"></U> </DIV> </div> </body> </html>