Окно в окне на JavaScript. Часть II

В первой части статьи мы рассматривали пример, как сделать всплывающее окно для IE. В данной статье мы попытаемся сделать то же, но для всех браузеров.

Одной из особенностью работы браузеров Mozilla является то, что при обращении к функциям, в которых используются переменные событий event, данной функции необходимо явно указывать, какой событие используется.

Рассмотрим код скрипта всплывающего окна:

<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>
Тестовое окно.<br>
В нем можно разместить не только текст,<br> но и элементы формы, изображения.
</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.

При нажатии на текст, выделенный другим цветом, вы увидите всплывающее окно.

Скачать данный скрипт можно здесь.

Информация
Тестовое окно Данное окно удобно использовать в качестве расширенной подсказки www.webobzor.net

webobzor.net

Igor  03.02.2007  22:08 Спасибо. Но.. можно ли в окошко грузить какой либо файл html, или php ?

lexa   03.02.2007  22:54 при желании можно вставить файл в виде фрейма в div окна

Raptor  19.06.2007  19:55 а как сделать, чтоб открывались несколько картинок отдельно ? у меня четыре картинки и почему-то при нажатии на любую открываются все четыре сразу (как одна)

lexa  20.06.2007  00:33 Объясни поподробнее, что тебе необходимо сделать

Raptor   20.06.2007  00:51 вот страничка в которую я встроил этот скрипт. http://rcroyal.org.ua/article/gy-601/ там четыре картинки и нужно, чтоб каждая картинка увеличивалась при клике на неё. а сейчас при клике на любой из четырех, открываются увеличенные размеры всех сразу (как одна картинка) и полоса прокрутки вниз фиг знает какая.

Raptor  20.06.2007  00:54 нужно, чтоб каждая картинка открывалась в увеличенном размере по отдельности

Raptor  20.06.2007  01:00 кстати, скрипт вывел отдельным файлом и встроил в документ так как хочу использовать этот эффект и на других станицах без добавления скрипта в каждую страницу

Raptor  20.06.2007  01:02 встроил script type="text/javascript" src="clic.js">

lexa  20.06.2007  10:50 самый простой способ - добавить к функции еще один параметр, например show_bar(event, id_pic),

lexa  20.06.2007  10:50 все картинки отображающиеся стереть и добавить туда пусто ,

lexa  20.06.2007  10:51 div id=image_pic>

lexa  20.06.2007  10:54 а потом в фунции show_bar вставить строку document.getElementById(image_pic).innerHTML = ... и присваивать ему img src с id_pic

Raptor  20.06.2007  12:21 спасибо за ответ, но я мало, что понял :))) Просто для тех, кто знает програмирование :))) можно чуть подробнее ? (без троеточий) если не очень трудно, по шагам. чего написать и куда впиндюрить.

lexa  20.06.2007  16:23 создавай тему на форуме и будет попродробнее

renkid    10.08.2007  10:38 Может я задам и очень глупый вопрос, но я задам... Вобщем мне надо добавить еще одну надпись...Что мне надо изменить или копирнуть?

lexa  10.08.2007  15:35 Если тебе надо надпись добавить в всплывающее окно, то просто вставляешь текст между дивами и все

renkid   10.08.2007  16:05 Нет мне надо еще одну надпись, что бы при нажатии на нее появлялось новое окно с новой информацией

lexa  10.08.2007  18:58 создаешь новый div с другим id, например win1, и переписываешь функции, например show_bar(ev, obj), hide_bar(obj), где в качестве obj передаешь win или win1, ну и у в функциях ставишь document.getElementById(obj)

Петрович  28.09.2007  17:43 А в Мозиле всиравно не работает :Р

lexa  30.09.2007  23:36 Работает во всех браузерах замечательно

Бодя   24.10.2007  09:31 Скрипт супер. Спасибо. Вот ток если подскажете как мне его применить если на странице 45 рисунков, и к каждому нужно свое окно? Вот пример страницы http://ordenplameni.tclans.ru/himer/karta.php. За ранее спасибо.

lexa   02.11.2007  12:11 http://www.art.webobzor.net/art/122.php

kot1k  07.01.2008  00:16 мне нужно написать возникающее при загрузке страницы небольшое окно,содержащее информацию о спонсоре(банер).при клике по баннеру внутри pop-up окна ,само окно закрывается,а страница спонсора загружается вместо неё.подскажите как это сделать.спасибо!!!

lexa29  07.01.2008  14:29 именно popup окно или всплываюшее как тут? если popup, кидай тему в форум, с кодом поможем.

kot1k  07.01.2008  17:26 я понял что оно должно всплывать.в свсплывающем окне банер.при клике на банер он(банер) закрывается, а вместо неё грузится страничка спонсора

lexa  07.01.2008  17:59 смотри на форуме

Legenda   17.01.2008  16:21 Спасибо...искал во всем инете, а нашел у вас этот скрипт...огромное спасибо ещё раз)

me8   14.03.2008  15:57 отличный скрипт... спасибо. не знаете можно ли окно сделать прозрачным и чтоб автоматически закрывалось через секунд 10?

me8  14.03.2008  16:40 как прозрачным полностью сделать понятно, а чтоб буквы были нормальными, а окно полупрозрачное?

X-Ray   16.03.2008  14:03 А как сделать что б ваше окошко окрывалось менуя рамки фреймов. Т.е. есть два фрейма. Вызываем в одном, оно открывается поверх обоих. Или хотя бы в другом.

alx   20.03.2008  01:00 скрипт бешенный! огромное спасибо! но есть недостаток, в мозилле не перетаскивается :( ну и в окно ошибок пишет "event is not defined" d cnhjrt 237 (на этом сайте) посоветуйте, пожалуйста, куда копать? оччень хочется до конца профессионально

Alenka  30.05.2008  20:40 ребята помогите плиз .. как зделать всплывающее окно которое будет появляться сразу при загрузке страницы .... там выше был такой же вопрос .. я копалась в форуме так ничего не нашла .... ну и само собой чтоб в разных браузерах работало ... или дайте ссылку на форум где это описано

lexa  31.05.2008  01:18 http://www.webobzor.net/forum/index.php?topic=84.msg479#new

Vok  08.07.2008  19:36 Скрипт бомба, а как сделать чтобы всплывающее окно было и поверх выпадающего списка ( 1 2 )?

Vok  08.07.2008  19:38 <select> <option>1</option> <option>2</option> </select>

Vok  08.07.2008  20:25 Уже нашел ответ :) http://www.hedgerwow.com/360/bugs/css-select-free.html

ыфва    31.10.2008  09:28 ыфваыфва

Icefire   31.12.2008  16:58 http://res.goldpages.com.ru/webobzor/program/window.zip ссылка на скрипт не работает.

lexa  02.01.2009  14:10 работает, может просто не был серв доступен, когда ты проверял

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	797