Home > Developer > JavaScript
JS implements a complete example of floating windows that can be scaled, dragged, closed, and minimized. js windows
This article describes how to zoom, drag, close, and minimize floating windows in JavaScript. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe 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 floating windows that can be scaled, dragged, closed, and minimized </title>
</Head>
<Style type = "text/css">
. DivWindow {word-wrap: break-word; position: absolute; overflow: hidden ;}
. DivBar {border: #000000 1px solid; position: absolute; border-bottom: #000000 1px solid; width: 100%; height: 20px; background-color: # 0099FF; cursor: hand; line-height: 20px ;}
. DivChange {position: absolute; right: 25px; font-size: 10pt ;}
. DivClose {position: absolute; right: 5px; font-size: 11pt ;}
. DivTitle {position: absolute; left: 5px; font-size: 10pt; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden ;}
. DivContent {border: #000000 1px solid; border-top: #000000 0px solid; position: absolute; top: 20px; width: 100%; background-color: # FFFFFF; overflow-y: auto;
SCROLLBAR-BASE-COLOR: # FFFFFF; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-FACE-COLOR: # EEEEEE; SCROLLBAR-HIGHLIGHT-COLOR: # EEEEEE;
SCROLLBAR-SHADOW-COLOR: # EEEEEE; SCROLLBAR-3DLIGHT-COLOR: # FFFFFF; SCROLLBAR-TRACK-COLOR: # FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: # CCCCCC ;}
. DivReSize {height: 7px; width: 7px; overflow: hidden; background-color: # 0000FF; position: absolute; bottom: 6px; right: 6px; cursor: nw-resize}
. DivIframe {height: 100%; width: 100% ;}
</Style>
<Script language = "javascript">
Var zindex = 0 // global variable
Function dragClass (name, title, content, left, top, width, height ){
Var isMouseDown = false;
Var maximum = false;
Var offX = 0; // you can specify the X coordinate of the capture point.
Var offY = 0; // you can specify the Y coordinate of the capture point.
Var oldLeft; // The X coordinate that stores the normal state.
Var oldTop; // Y coordinate of the normal state
This. mousedown = function () {// click the drag point
Bar. setCapture (); // sets the capture
OffX = parseInt (event. clientX)-parseInt (Window. style. left );
OffY = parseInt (event. clientY)-parseInt (Window. style. top );
IsMouseDown = true;
If (Window. style. zIndex <= zindex ){
Zindex ++;
Window. style. zIndex = zindex;
}
}
This. mousemove = function () {// drag the window
If (isMouseDown &&! Maximum ){
Bar. style. cursor = 'move'
Window. style. left = event. clientX-offX;
Window. style. top = event. clientY-offY;
If (Window. style. zIndex <= zindex ){
Zindex ++;
Window. style. zIndex = zindex;
}
}
}
This. mouseup = function () {// release the button
Bar. releaseCapture (); // cancel the capture
Bar. style. cursor = 'hand ';
If (parseInt (Window. style. top) <0 ){
Window. style. top = '0px ';
}
If (parseInt (Window. style. left) <0 ){
Window. style. left = '0px ';
}
IsMouseDown = false;
}
This. dblclick = function () {// double-click to minimize the maximum value
If (! Maximum ){
OldLeft = Window. style. left; // The X coordinate of the normal state.
OldTop = Window. style. top; // Save the normal Y coordinate
Window. style. left = '0px ';
Window. style. top = '0px ';
Window. style. width = document. body. clientWidth; // visible area width of the webpage
Title. style. width = (document. body. clientWidth-40) + 'px'; // set the Title Length
ReSize. style. display = 'none ';
If (Change. innerText = '-'){
Window. style. height = '123 ';
Content. style. height = document. body. clientHeight-20; // webpage visible area width-title height
} Else {
Window. style. height = '20px ';
}
Maximum = true;
} Else {
Window. style. left = oldLeft;
Window. style. top = oldTop;
Window. style. width = width + 'px ';
Title. style. width = (width-40) + 'px ';
ReSize. style. display = '';
If (Change. innerText = '-'){
Window. style. height = height + 'px ';
Content. style. height = parseInt (height-20) + 'px ';
} Else {
Window. style. height = '20px ';
}
Maximum = false;
}
If (Window. style. zIndex <= zindex ){
Zindex ++;
Window. style. zIndex = zindex;
}
}
This. changeWindow = function () {// Contract the window
Event. cancelBubble = true;
If (Change. innerText = '-'){
Window. style. height = '20px ';
Change. innerText = '□ ';
Content. style. display = 'none ';
ReSize. style. display = 'none ';
} Else {
If (maximum ){
Window. style. height = '123 ';
Content. style. display = '';
ReSize. style. display = '';
Content. style. height = document. body. clientHeight-20; // webpage visible area width-title height
} Else {
Window. style. height = height + 'px ';
Content. style. display = '';
ReSize. style. display = '';
Content. style. height = parseInt (height-20) + 'px ';
}
Change. innerText = '-';
}
}
Var Window = document. createElement ("div ");
Window. id = "divWindow" + name;
Window. className = "divWindow ";
Window. style. left = left + 'px ';
Window. style. top = top + 'px ';
Window. style. width = width + 'px ';
Window. style. height = height + 'px ';
Window. onclick = function (){
If (parseInt (Window. style. zIndex) <= zindex ){
Zindex ++;
Window. style. zIndex = zindex;
}
}
This. Window = Window;
// Public attribute, which can be operated outside the class; to operate outside the class, you can change the element to public attribute
Var Bar = document. createElement ("div ");
Bar. id = "divBar" + name;
Bar. onselectstart = "return false ";
Bar. className = "divBar ";
Bar. onmousedown = this. mousedown;
Bar. ondblclick = this. dblclick;
Bar. onmousemove = this. mousemove;
Bar. onmouseup = this. mouseup;
Window. appendChild (Bar );
Var Title = document. createElement ("span ");
Title. id = "divTitle" + name;
Title. className = "divTitle ";
Title. style. width = (width-40) + 'px '; // adaptive Title Length
Title. innerText = title;
Bar. appendChild (Title );
Var Change = document. createElement ("span ");
Change. id = "divChange" + name;
Change. className = "divChange ";
Change. innerText = "-";
Change. ondblclick = this. changeWindow;
Change. onclick = this. changeWindow;
Bar. appendChild (Change );
Var Close = document. createElement ("span ");
Close. id = "divClose" + name;
Close. onclick = function (){
Window. style. display = 'none ';
}
Close. className = "divClose ";
Close. innerText = "× ";
Bar. appendChild (Close );
Var Content = document. createElement ("div ");
Content. id = "divContent" + name;
Content. className = "divContent"
Content. innerHTML = content;
Content. style. height = parseInt (height-20) + 'px ';
Window. appendChild (Content );
Var ReSize = document. createElement ("div ");
ReSize. className = "divReSize ";
ReSize. onmousedown = function (){
If (Window. style. zIndex <= zindex ){
Zindex ++;
Window. style. zIndex = zindex;
}
ReSize. setCapture ();
IsMouseDown = true;
}
ReSize. onmousemove = function (){
If (isMouseDown &&! Maximum)
{
Width = parseInt (event. clientX)-parseInt (Window. style. left) + 5;
Height = parseInt (event. clientY)-parseInt (Window. style. top) + 5;
If (width> 100) {// set the minimum width
Window. style. width = width + 'px ';
Title. style. width = (width-40) + 'px ';
}
If (height> 100) {// set the minimum height
Window. style. height = height + 'px ';
Content. style. height = parseInt (height-20) + 'px ';
}
}
}
ReSize. onmouseup = function (){
ReSize. releaseCapture ();
IsMouseDown = false;
}
Window. appendChild (ReSize );
Var Iframe = document. createElement ("iframe"); // Add iframe to block the <select> Control Under IE6.0
Iframe. className = "divIframe ";
Window. appendChild (Iframe );
Document. body. appendChild (Window );
}
</Script>
<Body>
<Script>
// DragClass (ID, window title, content, X coordinate, Y coordinate, width, and length)
Var c1 = "Window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 ";
ObjWin1 = new dragClass ('win1', 'drag window 1', c1, 0,150,300,300 );
Var c2 = "window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 ";
ObjWin2 = new dragClass ('win2', 'drag window 2', c2, 350,150,300,300 );
Var objWin3;
Function openWin (){
If (objWin3 = null ){
Var c3 = "123 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 ";
ObjWin3 = new dragClass ('win3', c3, c3, 700,150,300,300 );
} Else {
If (objWin3.Window. style. display = 'None '){
ObjWin3.Window. style. display = '';
}
}
}
</Script>
<Input type = "button" value = "window 3 is displayed." onClick = "openWin ()"/>
</Body>
</Html>
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
