Method 1:
Preview:
Html code
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> floating window </title>
<Link type = "text/css" rel = "stylesheet" href = "css/overflow.css"/>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/overflow. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var B = $ ("# B ");
Var overFlow =$ ("# over ");
B. click (function (){
OverFlow. fadeIn ();
$ ("# Mask" ).css ("background", "#111 ");
$ ("# Mask" 2.16.css ("opacity", "0.8 ");
})
$ ("# Close"). click (function (){
OverFlow. fadeOut ();
$ ("# Mask" ).css ("background", "# fff ");
$ ("# Mask" 2.16.css ("opacity", "1 ");
});
Drag ($ ("# over"), $ ("# title "));
});
</Script>
</Head>
<Body>
<Div id = "over">
<Div id = "title"> <span id = "t"> This is just a title </span> <span id = "close"> [x] </span> </div>
<Div id = "content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. passing the value false causes the container to no longer capture all document events. instead, objects within that container still fire events, and those events also bubble as expected. <br/>
--- This is edited by Alb.
</Div>
</Div>
<Div id = "mask"> <a id = "B" href = "#"> click </a> </div>
</Body>
</Html>
Js Code
Copy codeThe Code is as follows:
Function drag (overFlow, title ){
Title. onmousedown = function (evt ){
Var doc = document;
Var evt = evt | window. event;
Var x = evt. offsetX? Evt. offsetX: evt. layerX;
Var y = evt. offsetY? Evt. offsetY: evt. layerY;
If (overFlow. setCapture ){
OverFlow. setCapture ();
} Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
Doc. onmousemove = function (evt ){
Evt = evt | window. event;
Var xPosition = evt. pageX | evt. clientX;
Var yPosition = evt. pageY | evt. clientY;
Var newX = xPosition-x;
Var newY = yPosition-y;
OverFlow. style. left = newX;
OverFlow. style. top = newY;
};
Doc. onmouseup = function (){
If (overFlow. releaseCapture ){
OverFlow. releaseCapture ();
} Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
Doc. onmousemove = null;
Doc. onmouseup = null;
};
};
}
Css code
Copy codeThe Code is as follows:
# Over {
Position: absolute;
Left: 300px;
Top: 200px;
Border: 1px solid black;
Display: none;
Background: # cccccc;
Cursor: default;
Width: 300px;
Z-index: 10;
Opacity: 1;
}
# Title {
Border: 1px solid #1840C4;
Background: # 95B4DC;
Padding: 2px;
Font-size: 12px;
Cursor: default;
}
# Close {
Cursor: pointer;
Margin-right: 1px;
Overflow: hidden;
}
# Content {
Border: 1px solid # C2D560;
Background: # EFF4D7;
}
# T {
Margin-right: 145px;
}
# Mask {
Z-index: 1;
Background: # fff;
Width: 1024px;
Height: 800px;
}
# B {
Position: absolute;
Left: 200px;
Top: 100px;
}
Body {
Padding: 0px;
Margin: 0px;
}
# Over {
Background: transparent;
}
Method 2:
Message frame mask layer: <iframe id = "show_upload_iframe" frameborder = 0 scrolling = "no" style = "display: none; position: absolute; "> </iframe> <div id =" show_upload "> nothing... </div>'
Loading the page: <div id = "body_loading" onClick = "loaded (); "> </div>
Close the floating window: <a href = "javascript: hideupload ()"> we recommend that you use a small image to close the window. </a>
Open the floating window: <a href = "javascript: showupload ('admin. php')"> open floating </a>
Copy codeThe Code is as follows:
// Message frame loading
Function loading (){
Var o = $ ('# body_loading ');
O.css ("left", ($ (document). width ()/2-(parseInt (o. width ()/2) + "px ");
O.css ("top", ($ (document ). height () + $ (document ). scrollTop ()/2-(parseInt (o. height ()/2) + "px ");
O. fadeIn ("fast ");
}
// The message box disappears.
Function loaded (){
Var o = $ ('# body_loading ');
O. fadeOut ("fast ");
}
// Hide the floating window
Function hideupload (){
$ ('# Show_upload'). hide ();
$ ('# Show_upload_iframe'). hide ();
}
// A floating window is displayed.
Function showupload (ajaxurl ){
Loading ();
Var o = $ ('# show_upload ');
Var f = $ ('# show_upload_iframe ');
Var top = 200;
$. Ajax ({
Url: ajaxurl,
// Cache: false,
Success: function (res ){
Loaded ();
O.html (res );
O.css ("left", ($ (document). width ()/2-(parseInt (o. width ()/2) + "px ");
If ($ (document). scrollTop ()> 200 ){
Top = ($ (document). height () + $ (document). scrollTop ()/2-(parseInt (o. height ()/2 );
}
O.css ("top", top + "px ");
F.css ({'width': o. width (), 'height': o. height (), 'left': o.css ('left'), 'top': o.css ('top ')});
F. show ();
O. show ();
}
});
}