The example of this article describes the method of js+css to implement the stunning rounded corners effect pop-up layer that can be dragged. Share to everyone for your reference. Specifically as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>JS+CSS implemented pop-up layer with stunning rounded corners </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>
<body>
<div id= "A" style= "position:absolute; left:300px; top:200px; " >
<a href= "javascript: onclick=" show (' t ') "> Dot here pop-up fillet effect div</a><a href= ' http://www.jb51.net/' target= ' _ Blank ' ><u> dialog box </u></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> Welcome </span>
<a href= "javascript: onclick=" cl (' t ') >x</a>
</div>
<div class= "D_body" > Welcome: Yun-Habitat Community
</DIV>
<div class= "D_foot" ></div>
<u class= "F3" ></u><u class= "F2" ></u><u class= "F1" ></U>
</DIV>
</div>
</body>
I hope this article will help you with your JavaScript programming.
