В этой статье описывается метод реализации плавучих окон, которые можно масштабировать, перетаскиваться, закрывать и минимизировать JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS реализует плавающие окна, которые можно масштабировать, перетаскиваться, закрывать и минимизировать </title>
</head>
<стиль типа = "text/css">
.divwindow {word-wrap: break-word; позиция: абсолют; переполнение: скрыто;}
.divbar {border:#000000 1px soluts; положение: абсолютное; граница-ботмом:#000000 1px solid; ширина: 100%; высота: 20px; фоновый цвет:#0099ff; cursor: hand; line-height: 20px;}
.divchange {позиция: абсолют; справа: 25px; font-size: 10pt;}
.divclose {позиция: абсолют; справа: 5px; font-size: 11pt;}
.divtitle {позиция: абсолют; слева: 5px; font-size: 10pt; белое пространство: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;}
.divcontent {border:#000000 1px sold; граница:#000000 0px solid; положение: абсолют; Верх: 20px; ширина: 100%; фоновый цвет: #fffff; Overflow-y: Auto;
Brollbar-Base-Color: #fffff; Scrollbar-Errow-Color: #999999; Crollbar-Face-Color: #eeeee; Scrollbar-Highlight-Color: #eeeee;
Прокрутка-склеиковое цвета: #eeeeee; scrollbar-3dlight-color: #fffff; scrollbar-track-color: #fffff; scrollbar-darkshadow-color: #ccccc;}
.divresize {высота: 7px; Ширина: 7px; переполнение: скрыто; фоновый цвет:#0000ff; позиция: абсолютно; Внизу: 6px; Справа: 6px; Курсор: NW-Resize}
.diviframe {высота: 100%; ширина: 100%;}
</style>
<script language = "javascript">
var Zindex = 0 // Глобальные переменные
Функция DragClass (имя, заголовок, контент, слева, верх, ширина, высота) {
var ismousedown = false;
var maximum = false;
var offx = 0; // Установить координату x точки захвата
var offy = 0; // Установить координату y точки захвата
var Oldleft; // Сохранить x координаты в нормальном состоянии
var oldtop; // Сохранить координаты Y в нормальном состоянии
this.mousedown = function () {// нажмите точку перетаскивания
Bar.setCapture (); // set Crawl
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 () {// перетаскивать окно
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 () {// выпустить кнопку
Bar.ReleaseCapture (); // Отмена ползания
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 () {// дважды щелкните, чтобы минимизировать
if (! Максимум) {
Oldleft = window.style.left; // Сохранить x координаты в нормальном состоянии
OldTop = window.style.top; // Сохранить координаты Y в нормальном состоянии
Window.style.left = '0px';
Window.style.top = '0px';
Window.style.width = document.body.clientwidth; // видимая область веб -страницы широкая
Title.style.width = (document.body.clientwidth-40)+'px'; // Установить длину заголовка
Resize.style.display = 'none';
if (change.innerText == '-') {
Window.style.height = '100%';
Content.style.height = document.body.clientheight-20; // видимая ширина области веб -страницы - высота заголовка
}еще{
Window.style.height = '20px';
}
максимум = true;
}еще{
Window.style.left = oldleft;
Window.style.top = oldtop;
Window.style.width = width+'px';
Title.style.width = (ширина-40)+'px';
Resize.style.display = '';
if (change.innerText == '-') {
Window.style.height = height+'px';
Content.style.height = parseint (высота-20)+'px';
}еще{
Window.style.height = '20px';
}
максимум = false;
}
if (window.style.zindex <= ZINDEX) {
Zindex ++;
Window.style.zindex = ZINDEX;
}
}
this.changewindow = function () {// сокращается окно
event.cancelbubble = true;
if (change.innerText == '-') {
Window.style.height = '20px';
Change.innerText = '□';
Content.style.display = 'none';
Resize.style.display = 'none';
}еще{
if (максимум) {
Window.style.height = '100%';
Content.style.display = '';
Resize.style.display = '';
Content.style.height = document.body.clientheight-20; // видимая ширина области веб -страницы - высота заголовка
}еще{
Window.style.height = height+'px';
Content.style.display = '';
Resize.style.display = '';
Content.style.height = parseint (высота-20)+'px';
}
Change.innerText = '-';
}
}
var window = document.createElement ("div");
Window.id = "divwindow"+ name;
Window.classname = "Divwindow";
Window.style.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;
// публичные атрибуты, которые могут работать за пределами класса; Если вы хотите работать вне класса, вы можете изменить элемент на публичные атрибуты
var bar = document.createElement ("div");
Bar.id = "divbar"+name;
Bar.onselectstart = "вернуть false";
Bar.classname = "divbar";
Bar.onmousedown = this.mousedown;
Bar.ondblclick = this.dblclick;
Bar.onmouseMove = this.mouseMove;
Bar.onmouseup = this.mouseup;
Window.appendchild (бар);
var title = document.createElement ("span");
Title.id = "divtitle"+ name;
Title.classname = "divtitle";
Title.style.width = (ширина-40)+'px'; // адаптивная длина заголовка
Title.innertext = title;
Bar.appendchild (название);
var изменение = document.createElement ("span");
Change.id = "divchange"+ name;
Change.classname = "divchange";
Change.innerText = "-";
Change.ondblclick = this.changeWindow;
Change.onclick = this.changeWindow;
Bar.appendchild (изменение);
var close = document.createElement ("span");
Close.id = "divclose"+ name;
Close.onclick = function () {
Window.style.display = 'none';
}
Close.classname = "divclose";
Close.innerText = "×";
Bar.appendchild (близко);
var content = document.createElement ("div");
Content.id = "divcontent"+ name;
Content.classname = "divcontent"
Content.innerhtml = content;
Content.style.height = parseint (высота-20)+'px';
Window.appendChild (Content);
var reszize = 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 &&! Максимум)
{
width = parseint (event.clientx) -parseint (window.style.left) +5;
высота = parseint (event.clienty) -parseint (window.style.top) +5;
if (ширина> 100) {// установить минимальную ширину
Window.style.width = width+'px';
Title.style.width = (ширина-40)+'px';
}
if (высота> 100) {// установить минимальную высоту
Window.style.height = height+'px';
Content.style.height = parseint (высота-20)+'px';
}
}
}
Resize.onmouseup = function () {
Resize.ReleaseCapture ();
ismousedown = false;
}
Window.appendchild (resize);
var iframe = document.createElement ("iframe"); // Добавить iframe, заблокировать элемент управления <select> в IE6.0
Iframe.classname = "diviframe";
Window.appendchild (iframe);
document.body.appendchild (окно);
}
</script>
<тело>
<Скрипт>
// DragClass (ID, заголовок окна, контент, x координата, y координата, ширина, длина)
var c1 = "Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно. Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно. 1 Окно 1 Окно. Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно 1 Окно. Окно 1 Окно 1 Окно 1 Окно 1 Окно.
objwin1 = new Dragclass ('win1', 'window 1', C1,0,150 300 300);
var c2 = "Window 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 Окно 2 В окне 2 В окне 2 Окно 2 Окно 2 Окно 2";
objwin2 = new DragClass ('win2', 'window 2', C2,350 1550 300 300);
var objwin3;
функция 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 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, c3700 150,300 300);
}еще{
if (objwin3.window.style.display == 'none') {
objwin3.window.style.display = '';
}
}
}
</script>
<input type = "button" value = "opup [winwok 3]" onclick = "openwin ()" />
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.