<html> <head> <title>JS+CSS实现的可拖拽的漂亮圆角效果的弹出层</title> <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; } </style> <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; 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; } </script> </head> <body> <div id="a" style="position:absolute; left:300px; top:200px;"> <a href="javascript:" onClick="show('t')">点这里弹出圆角效果的div对话框!</a> </div> <div id="t" 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:" onClick="cl('t')">×</a> </div> <DIV class="d_body" >欢迎光临:代码家园,本站地址:www.CsrCode.cn </DIV> <div class="d_foot"></div> <U class="f3"></U><U class="f2"></U><U class="f1"></U> </DIV> </div> </body> </html> <br><br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p> 运行代码 复制代码 另存代码 提示:可以先修改部分代码后再运行 幸运28在线预测网站 www.p6z5p.cn 转载请注明:幸运28在线预测网站 ? JS+CSS实现的可拖拽的漂亮圆角特效的弹出层 继续浏览有关 的文章 上一篇:jQuery+css打造的一款漂亮弹出层 下一篇:JS+CSS随屏幕滚动的带缓冲特效的右下角DIV浮动层 相关代码 JS弹出可拖拽可关闭的div层 JS+CSS实现几个DIV层上下移动交换位置的特效 两个不同特效DIV弹出遮罩层,遮住整个页面/可视部分 来自nVida网站上漂亮简洁的两个div层滑动切换特效 + JS+CSS随屏幕滚动的带缓冲特效的右下角DIV浮动层 + CSS+Js实现Li列表隔行换色特效 + 一款绝对定位的css布局实例 + jQuery实现DIV层淡入淡出的拖动特效 + 推荐JS+CSS布局的人气列表切换特效 + 用CSS实现LI列表图文混排的布局实例 + CSS滚动时无闪烁的固定浮动元素 + CSS让fieldset边框变成凹陷立体特效 + jQuery+css打造的一款漂亮弹出层 + JS+CSS实现的可拖拽的漂亮圆角特效的弹出层 + JS+CSS实现的Div弹出窗口,同时背景变暗 + CSS+JS打造的图片上的带箭头的悬停提示框