| |
|
|
| | подскажите, как сделать модальное окно чтобы можно было брать за него мышкой и перемещать по экрану, и главное чтобы за пределы экрана не уходило. Пример такого я заметил на сайте
http://khcar.net.ua/news/16972-kitayskiy-avtorynok-perezhil-krupneyshee-padenie-za-sem-let.html
при размещении комментария, если не указывать ничего и запостить, то появится блок с сообщением. Желательно бы на jQuery но без применения UI т.к. слишком громозкая. | |
| |
|
|
| |
|
|
| |
для: web777
(13.03.2012 в 13:07)
| | | Во-первых, никакое оно не модальное.
При открытом модальном окне невозможны никакие действия вне этого окна, пока его не закроешь. А тут: хочешь - пиши, хочешь - ссылки нажимай... окно этому не помеха.
Во-вторых, за пределы экрана это окошко таки "выползает" - вверх и вниз поперемещайте, сами увидите.
В общем, хреновенький пример вы "заметили" :-( | |
| |
|
|
| |
|
|
| |
для: web777
(13.03.2012 в 13:07)
| | |
<div class="draggable" id="results" onmousedown="this.style.zIndex=10;StartDrag(event,this)" style="position: absolute; top: 100px; left:550px; width:200px; z-index: 1000; cursor: hand; visibility: hidden;">
<dd>
здесь - содержимое слоя, которoe можно перетаскивать мышкой
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var isMSIE = document.attachEvent != null;
var isGecko = !document.attachEvent && document.addEventListener;
var DraggingItem = new Object();
function StartDrag (event, _this)
{
DraggingItem.This = _this;
var position = new Object();
if (isMSIE)
{ position.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
position.y = window.event.clientY + document.documentElement.scrollTop+ document.body.scrollTop;
}
if (isGecko)
{ position.x = event.clientX + window.scrollX;
position.y = event.clientY + window.scrollY;
}
DraggingItem.cursorStartX = position.x;
DraggingItem.cursorStartY = position.y;
DraggingItem.StartLeft = parseInt (DraggingItem.This.style.left);
DraggingItem.StartTop = parseInt (DraggingItem.This.style.top);
if (isNaN (DraggingItem.StartLeft)) {
DraggingItem.StartLeft = 0;
DraggingItem.StartTop = 0;
}
if (isMSIE)
{ document.attachEvent ("onmousemove", ProceedDrag);
document.attachEvent ("onmouseup", StopDrag);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (isGecko)
{ document.addEventListener ("mousemove", ProceedDrag, true);
document.addEventListener ("mouseup", StopDrag, true);
event.preventDefault();
}
}
function ProceedDrag (event)
{
var position = new Object();
if (isMSIE)
{ position.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
position.y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
if (isGecko)
{ position.x = event.clientX + window.scrollX;
position.y = event.clientY + window.scrollY;
}
var nextX = DraggingItem.StartLeft + position.x - DraggingItem.cursorStartX;
if (nextX < 0) nextX = 0;
if (nextX > 1000) nextX = 1000;
DraggingItem.This.style.left = nextX + "px";
var nextY = DraggingItem.StartTop + position.y - DraggingItem.cursorStartY;
if (nextY < 0) nextY = 0;
if (nextY > 800) nextY = 800;
DraggingItem.This.style.top = nextY + "px";
if (isMSIE)
{ window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (isGecko) event.preventDefault();
}
function StopDrag (event)
{
if (isMSIE)
{ document.detachEvent ("onmousemove", ProceedDrag);
document.detachEvent ("onmouseup", StopDrag);
}
if (isGecko)
{ document.removeEventListener ("mousemove", ProceedDrag, true);
document.removeEventListener ("mouseup", StopDrag, true);
}
if (DraggingItem.AfterAction) DraggingItem.AfterAction (DraggingItem.This);
}
</SCRIPT>
</dd>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: elenaki
(13.03.2012 в 20:07)
| | | Какая большая простыня :-)
А окно всё-равно не модальное :-(
И ограничение по ширине/высоте у вас классно прописано :-))
А если я окошко "ужму" по ширине/высоте меньше, чем на 1000/800 пикселей, то это "не считается"? :-) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(14.03.2012 в 09:36)
| | | Это просто болезнь такая - считать каждую рамочку окном, а если она еще где-то всплывает или двигается, то непременно модальная. :) | |
| |
|
|
