Este artículo describe el método de implementar ventanas flotantes que pueden ser escaladas, arrastradas, cerradas y minimizadas por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS implementa ventanas flotantes que se pueden escalar, arrastrar, cerrar y minimizar </title>
</ablo>
<style type = "text/css">
.divwindow {word-wrap: break-word; posición: absoluto; desbordamiento: oculto;}
.Divbar {borde:#000000 1px sólido; posición: absoluto;-bottom:#000000 1px sólido; ancho: 100%; altura: 20px; color de fondo:#0099ff; cursor: manual; altura de línea: 20px;}
.divchange {posición: absoluto; derecha: 25px; font-size: 10pt;}
.DivClose {posición: Absolute; derecha: 5px; font-size: 11pt;}
.divtitle {posición: absoluto; izquierda: 5px; font-size: 10pt; white-space: nowrap; text-upverflow: ellipsis; -o-text-overflow: ellipsis; desbordamiento: oculto;}
.DivContent {borde:#000000 1px sólido; border-top:#000000 0px sólido; posición: absoluto; arriba: 20px; ancho: 100%; Color de fondo: #fffff; Overflow-y: Auto;
Scrollbar-Base-Color: #FFFFF; Scrollbar-Arrow-Color: #999999; Scrollbar-Face-Color: #EEEEE; Scrollbar-Highlight-Color: #EEEEE;
Scrollbar-shadow-color: #eeeee; scrollbar-3dlight-color: #fffff; scrollbar-track-color: #fffff; scrollbar-darkshadow-color: #cccccc;}
.DivResize {altura: 7px; Ancho: 7px; desbordamiento: oculto; Color de fondo:#0000ff; Posición: Absoluto; Abajo: 6px; Derecha: 6px; Cursor: NW-Resize}
.diviframe {altura: 100%; ancho: 100%;}
</style>
<script language = "javaScript">
var zindex = 0 // variables globales
function dragClass (nombre, título, contenido, izquierda, arriba, ancho, altura) {
var isMousEdown = false;
var máximo = falso;
var offx = 0; // establece la coordenada x del punto de agarre
var offy = 0; // Establecer la coordenada y del punto de agarre
var Oldleft; // Guardar las coordenadas X en estado normal
var Oldtop; // Guardar las coordenadas y en estado normal
this.MouseDown = function () {// presione el punto de arrastre
Bar.setCapture (); // establecer rastreo
offx = parseInt (event.clientx) -parseint (window.style.left);
offy = parseint (event.clienty) -parseint (window.style.top);
isMousEdown = verdadero;
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.mouseMove = function () {// arrastre la ventana
if (isMousEdown &&! Maximum) {
Bar.style.cursor = 'mover'
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 () {// Relase el botón
Bar.RelEASECapTure (); // Cancelar rastreo
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 () {// Haga doble clic para minimizar
if (! Maximum) {
oldleft = window.style.left; // Guardar las coordenadas X en estado normal
Oldtop = window.style.top; // Guardar las coordenadas y en estado normal
Window.style.left = '0px';
Window.style.top = '0px';
Window.style.width = document.body.clientWidth; // El área visible de la página web es amplia
Title.style.width = (document.body.clientwidth-40)+'px'; // Establecer la longitud del título
Resize.style.display = 'ninguno';
if (cambio.inntext == '-') {
Window.style.Height = '100%';
Content.style.height = document.body.clientHeight-20; // Ancho de área visible de la página web - Altura del título
}demás{
Window.style.Height = '20px';
}
máximo = verdadero;
}demás{
Window.style.left = Oldleft;
Window.style.top = Oldtop;
Window.Style.Width = Width+'Px';
Title.style.width = (ancho-40)+'px';
Resize.style.display = '';
if (cambio.inntext == '-') {
Window.Style.Height = Height+'Px';
Content.style.Height = parseInt (altura-20)+'px';
}demás{
Window.style.Height = '20px';
}
máximo = falso;
}
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.changewindow = function () {// encoge la ventana
event.cancelBubble = true;
if (cambio.inntext == '-') {
Window.style.Height = '20px';
Change.inntext = '□';
Content.style.display = 'none';
Resize.style.display = 'ninguno';
}demás{
if (máximo) {
Window.style.Height = '100%';
Content.style.display = '';
Resize.style.display = '';
Content.style.height = document.body.clientHeight-20; // Ancho de área visible de la página web - Altura del título
}demás{
Window.Style.Height = Height+'Px';
Content.style.display = '';
Resize.style.display = '';
Content.style.Height = parseInt (altura-20)+'px';
}
Change.inntext = '-';
}
}
Varina var = document.createElement ("div");
Window.id = "DivWindow"+ Nombre;
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;
// atributos públicos, que se pueden operar fuera de la clase; Si desea operar fuera de la clase, puede cambiar el elemento a atributos públicos
var bar = document.createElement ("div");
Bar.id = "divbar"+nombre;
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"+ nombre;
Title.classname = "Divtitle";
Title.style.width = (ancho-40)+'px'; // Longitud del título adaptativo
Title.inntext = title;
Bar.appendChild (título);
var cambio = document.createElement ("span");
Change.id = "Divchange"+ Nombre;
Change.ClassName = "Divchange";
Change.inntext = "-";
Change.ondblClick = this.changeWindow;
Change.OnClick = this.changeWindow;
Bar.appendChild (cambio);
var cerrar = document.createElement ("span");
Close.id = "DivClose"+ Nombre;
Close.OnClick = function () {
Window.style.display = 'Ninguno';
}
Close.className = "DivClose";
Close.inntext = "×";
Bar.appendchild (cierre);
var content = document.createElement ("div");
Content.id = "divcontent"+ nombre;
Content.classname = "divcontent"
Content.innerhtml = content;
Content.style.Height = parseInt (altura-20)+'px';
Window.appendChild (contenido);
var endize = document.createElement ("div");
Resize.classname = "DivResize";
Cambiar el tamaño.onmouseDown = function () {
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
RESEZE.SetCapture ();
isMousEdown = verdadero;
}
Resize.onmouseMove = function () {
if (isMousEdown &&! Maximum)
{
ancho = parseint (event.clientx) -parseint (window.style.left) +5;
altura = parseint (event.clienty) -parseint (window.style.top) +5;
if (ancho> 100) {// Establezca el ancho mínimo
Window.Style.Width = Width+'Px';
Title.style.width = (ancho-40)+'px';
}
if (altura> 100) {// Establecer la altura mínima
Window.Style.Height = Height+'Px';
Content.style.Height = parseInt (altura-20)+'px';
}
}
}
Resize.onmouseUp = function () {
Resize.releaseCapture ();
isMousEdown = false;
}
Window.appendChild (cambiar el tamaño);
var iframe = document.createElement ("iframe"); // Agregue un iframe, bloquee el control <select> en IE6.0
Iframe.classname = "diviframe";
Window.AppendChild (iframe);
document.body.appendChild (ventana);
}
</script>
<Body>
<script>
// DragClass (ID, Título de la ventana, Contenido, X Coordinada, Y Coordinada, Ancho, Longitud)
var c1 = "Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana 1 Ventana.
objwin1 = new DragClass ('Win1', 'Window de arrastre 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 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', 'Window de arrastre 2', C2,350,150,300,300);
var objwin3;
función OpenWin () {
if (objwin3 == null) {
var c3 = "123 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana Ventana 3 Ventana 3 Ventana Ventana Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana Ventana 3 Ventana Ventana Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana Ventana 3 Ventana Ventana 3 Ventana Ventana. 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 Ventana 3 Ventana 3 Ventana 3 Ventana Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventana 3 Ventanas 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window Window 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window Window 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window
objwin3 = new DragClass ('Win3', C3, C3,700,150,300,300);
}demás{
if (objwin3.window.style.display == 'none') {
objwin3.window.style.display = '';
}
}
}
</script>
<input type = "Button" value = "Pop up [Window 3]" onClick = "OpenWin ()" />
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.