Javascript + CSS implements a drag-and-drop nice rounded corner effect pop-up layer complete instance
This article mainly introduces the JS + CSS pop-up layer for implementing the drag-and-drop nice rounded corner special effects. It analyzes the pop-up layer special effects and implementation techniques for the rounded corner rectangle in the form of a complete example. For more information, see
The example in this article describes how JS + CSS achieves the nice rounded corner effect pop-up layer that can be dragged. Share it with you for your reference. The details are as follows:
The Code is as follows:
<! 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> JS + CSS Implementation of the drag-and-drop nice Corner Effect pop-up layer </title>
<Style>
Body {
Margin: 0px;
Padding: 0px;
Font-size: 14px;
}
# T {
Position: absolute;
Float: left;
Left: 0px;
Top: 0px;
}
# {
Float: left;
}
. Al {
Opacity: 0.80;
Filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 80, finishOpacity = 100 );
}
. Al {
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 {
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')"> click here to bring up the div of the rounded corner effect </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 =" Al "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 =" Al "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')"> × </a>
</Div>
<DIV class = "d_body"> welcome: Home of scripts
</DIV>
<Div class = "d_foot"> </div>
<U class = "f3"> </U> <U class = "f2"> </U> <U class = "f1"> </U>
</DIV>
</Div>
</Body>
</Html>
I hope this article will help you design javascript programs.
