Интересные статьи

Создание всплывающего окна на javascript

Сегодня мы с вами рассмотрим создание всплывающего окна на javascript. Но всплывать оно у нас будет не при заходе на страницу сайта, как это бывает на многих сайтах. Просто многие с помощью такой фишки гонят трафик на партнерки. Мы же люди честные, поэтому будем использовать это окно в качестве всплывающей подсказки.
Допустим, вы написали, какую либо статью и вам необходимо сделать в ней сноски, но смотреть сноски в конце статьи не очень удобно. Гораздо удобнее было бы смотреть сноски, просто нажимая на слово. Вот именно это мы сейчас и реализуем.
Так же постараемся сделать так, чтобы наш скрипт работал под все популярные браузеры.

Приступим.

Нужно учитывать тот факт, что одной из особенностей работы браузеров Mozilla является то, что при обращении к функциям, в которых используются переменные событий event, данной функции необходимо явно указывать, какой событие используется.
Всплывающая подсказка на Javascript. Под любой браузер.
Рассмотрим код скрипта всплывающего окна:

<style>
.bar

{

position: absolute;
border: 1px solid;
padding: 5px;
left: 0px;
width: 300px;
height: 80px;
visibility: hidden;
background-color: #F0F0F0

}
</style>

<script language=JavaScript>
function show_bar(ev)

{
MouseX = ev.clientX + document.body.scrollLeft;
MouseY = ev.clientY + document.body.scrollTop;
obj = document.getElementById(”win”);
obj.style.top = MouseY + 10;
obj.style.left = MouseX;
obj.style.visibility = “visible”;
}

function hide_bar()

{
document.getElementById(”win”).style.visibility=”hidden”
}
</script>

При нажатии на

<span style=’cursor: pointer; color: #FF0000 onclick=’show_bar(event)’>слова</span>, выделенные другим цветом под ними будет

<span style=’cursor: pointer; color: #FF0000 onclick=’show_bar(event)’>открываться</span>

всплывающее окно.

<div id=win class=bar>
<div align=right>
<span style=’cursor: pointer’ title=’Закрыть’ onclick=’hide_bar()’>x</span>
</div>

Тестовое окно.
В нем можно разместить не только текст, но и элементы формы, изображения.

При обращении к функции show_bar() ей передается параметр event, который определяет, какое событие вызвало на выполнение функцию:

show_bar(event)

В самой функции олределение координат позиции курсора расчитывается исходя из переданного параметра event:

MouseX = ev.clientX + document.body.scrollLeft;
MouseY = ev.clientY + document.body.scrollTop;

Это главнейшая особенность браузеров Mozilla, так как IE на лету подхватывает события. Если добавить в функцию элементы Drag&Drop можно получить довольно симпатичное всплывающее окно, которое к тому же перетаскивается под Internet Exlorer. Ну вот собственно и все. Теперь скрипт готов к использованию.

Интересные статьи

Статейная биржа wmzona.com

Интересные статьи | (Закрыть)