この記事の例では、JS CSS を使用して、ドラッグ可能な美しい角の丸いポップアップ レイヤーを実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。 コードをコピー コードは次のとおりです: JS+CSS实现的可拖拽的漂亮圆角效果的弹出层 <br> body{<br> margin:0px;<br> padding:0px;<br> font-size:14px;<br> }<br> #t {<br> position:absolute;<br> float:left;<br> left:0px;<br> top:0px;<br> }<br> #a {<br> float:left;<br> }<br> .al {<br> opacity: 0.80;<br> filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);<br> }<br> .al2{<br> opacity: 0.00;<br> filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);<br> }<br> U {<br> DISPLAY: block;<br> OVERFLOW: hidden;<br> HEIGHT: 1px<br> }<br> U.f1 {<br> background-color:#5cc;<br> BACKGROUND: #5cc;<br> MARGIN: 0px 3px<br> }<br> U.f2 {<br> background-color:#5cc;<br> BORDER-RIGHT: #5cc 2px solid;<br> MARGIN: 0px 1px;<br> BORDER-LEFT: #5cc 2px solid<br> }<br> U.f3 {<br> background-color:#5cc;<br> BORDER-RIGHT: #5cc 1px solid;<br> MARGIN: 0px 1px;<br> BORDER-LEFT: #5cc 1px solid<br> }<br> .d_top{<br> clear:both;<br> overflow:hidden;<br> background-color:#5cc;<br> height:29px;<br> vertical-align:bottom;<br> }<br> .d_top a{<br> float:right;<br> margin-top:5px;<br> margin-right:13px;<br> padding-top:3px;<br> width:18px;<br> color:red;<br> background-color:#789;<br> text-decoration:none;<br> font-weight:bold;<br> text-align:center;<br> vertical-align:middle;<br> }<br> .d_top span{<br> float:left;<br> font-size:13px;<br> margin-left:15px;<br> margin-top:8px;<br> }<br> .d_body {<br> BORDER-RIGHT: #5cc 3px solid;<br> BORDER-LEFT: #5cc 3px solid;<br> padding:10px;<br> height:200px;<br> background-color:#fff;<br> }<br> .d_foot{<br> clear:both;<br> overflow:hidden;<br> background-color:#5cc;<br> height:2px;<br> }<br> <br> function $(id){return document.getElementById(id);}<br> function show(id){<br> var t = $(id);<br> t.style.width=document.body.clientWidth;<br> t.style.height=document.body.clientHeight;<br> window.onresize=function(){<br> t.style.width=document.body.clientWidth;<br> t.style.height=document.body.clientHeight;<br> }<br> $(id).style.display="";<br> }<br> function cl(id){<br> $(id).style.display="none";<br> }<br> function moveEvent(e,id){<br> var isIE = (document.all)?true:false;<br> drag = true;<br> xx=isIE?event.x:e.pageX;<br> yy=isIE?event.y:e.pageY;<br> L = document.getElementById(id).offsetLeft;<br> T = document.getElementById(id).offsetTop;<br> document.onmousemove = function(e) {<br> if (drag) {<br> x=isIE?event.x:e.pageX; if(x<0)x=0;<br /> y=isIE?event.y:e.pageY; if(y<0)y=0;<br /> document.getElementById(id).style.left = L-xx+x;<br /> document.getElementById(id).style.top = T-yy+y;<br /> }<br /> }<br /> document.onmouseup=function(){<br /> drag = false;<br /> }<br /> }<br /> window.onscroll=function(){<br /> $("back_div").style.width=document.body.scrollWidth;<br /> $("back_div").style.height=document.body.scrollHeight;<br /> }<br /> 点这里弹出圆角效果的div对话框！ 欢迎光临 × 欢迎光临：脚本之家 希望本文所述对大家的javascript程序设计有所帮助。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
