Как сделать всплывающий div?
Подскажите, плз, как сделать всплывающий div как на этом сайте когда нажимешь "поиск" в главном меню.
сделал div c абсол. позичионированием, с display:none и при нажатии на кнопку display:block
Но никак не могу найти как взять координаты клика мыши и присвоить их left'y и top'у div'а.
И еще не могу найти как сделать чтобы он показывался плавно, а не просто появлялся.
сделал div c абсол. позичионированием, с display:none и при нажатии на кнопку display:block
Но никак не могу найти как взять координаты клика мыши и присвоить их left'y и top'у div'а.
И еще не могу найти как сделать чтобы он показывался плавно, а не просто появлялся.
Видимость управляется так через свойство style.visibility. Вот так:
Код:
document.getElementById('div1').style.visibility='visible';
document.getElementById('div2').style.visibility='hidden';
document.getElementById('div2').style.visibility='hidden';
погляди как интересно выглядит меню на amazon.com. и это не флэш
в JS:
// mX - X координата мыши.
var mX = event.offsetX;
// mY - Y координата мыши.
var mY = event.offsetY;
// mX - X координата мыши.
var mX = event.offsetX;
// mY - Y координата мыши.
var mY = event.offsetY;
[QUOTE=ilyes]Подскажите, плз, как сделать всплывающий div как на этом сайте когда нажимешь "поиск" в главном меню.
сделал div c абсол. позичионированием, с display:none и при нажатии на кнопку display:block
Но никак не могу найти как взять координаты клика мыши и присвоить их left'y и top'у div'а.
И еще не могу найти как сделать чтобы он показывался плавно, а не просто появлялся.[/QUOTE]
Координаты мыши можно взять так:
1. window.event.x и window.event.y - позиция курсора мыши относительно отца цели события;
window.event.clientX и window.event.clientY - координаты события в клиентской области;
window.event.offsetX и window.event.offsetX - позиции курсора мыши относительно цели события.
2. Присвоение можно делать, например, так:
id_твоего_дива.style.posTop или id_твоего_дива.offsetTop
3. Почему бы тебе не открыть popup-окошко от указателя мыши?
--------------------------- Пример -------------------------
<HTML>
<HEAD>
<TITLE>Popup</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function ButtonClick(){
var oPopBody = oPopup.document.body;
oPopBody.style.backgroundColor = "lightyellow";
oPopBody.style.border = "solid black 1px";
oPopBody.innerHTML = "Чтобы закрыть кликни вне <B>popup</B>-окна.";
oPopup.show(event.x, event.y, 270, 25, document.body);
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON onclick="ButtonClick()"> Click Me! </BUTTON>
</BODY>
</HTML>
сделал div c абсол. позичионированием, с display:none и при нажатии на кнопку display:block
Но никак не могу найти как взять координаты клика мыши и присвоить их left'y и top'у div'а.
И еще не могу найти как сделать чтобы он показывался плавно, а не просто появлялся.[/QUOTE]
Координаты мыши можно взять так:
1. window.event.x и window.event.y - позиция курсора мыши относительно отца цели события;
window.event.clientX и window.event.clientY - координаты события в клиентской области;
window.event.offsetX и window.event.offsetX - позиции курсора мыши относительно цели события.
2. Присвоение можно делать, например, так:
id_твоего_дива.style.posTop или id_твоего_дива.offsetTop
3. Почему бы тебе не открыть popup-окошко от указателя мыши?
--------------------------- Пример -------------------------
<HTML>
<HEAD>
<TITLE>Popup</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function ButtonClick(){
var oPopBody = oPopup.document.body;
oPopBody.style.backgroundColor = "lightyellow";
oPopBody.style.border = "solid black 1px";
oPopBody.innerHTML = "Чтобы закрыть кликни вне <B>popup</B>-окна.";
oPopup.show(event.x, event.y, 270, 25, document.body);
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON onclick="ButtonClick()"> Click Me! </BUTTON>
</BODY>
</HTML>
Спасибо! Вроде работает!