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

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

Я практически не буду вдаваться в подробности скрипта, так как он практически копирует код из предыдущей статьи Окно в окне на JavaScript. Часть II. Но наиболее существенные моменты я, разумеется, опишу.

Код скрипта:

<style>

.linkspan { cursor: pointer; color: #FF0000 }

.closespan { font-size: 11px; color: #FFDE73; cursor: pointer }

.bar {
position: absolute;
border: 1px solid #FFDE73;
padding: 5 10 5 5;
left: 0px;
width: 300px;
height: 80px;
visibility: hidden;
background-color: #FFFFCC}

</style>

<script>

var closewindow = true;
var openwindow = '';

function show_bar(ev, id) {

MouseX = ev.clientX + document.body.scrollLeft;
MouseY = ev.clientY + document.body.scrollTop;
if ((closewindow == true) && (openwindow != ''))
{
document.getElementById(openwindow).style.visibility="hidden";
}
openwindow = "win[" + id + "]";
obj = document.getElementById(openwindow);

obj.style.top = MouseY + 10;
obj.style.left = MouseX;
obj.style.visibility = "visible";
}

function hide_bar(id) {

document.getElementById("win[" + id + "]").style.visibility="hidden";

}

</script>

При нажатии на <span class='linkspan' onclick='show_bar(event, 1)'>первую ссылку</span> вы увидите первое всплывающее окно, при нажатии на <span class='linkspan' onclick='show_bar(event, 2)'>вторую</span> - второе всплывающее окно. При нажатии на <span class='linkspan' onclick='show_bar(event, 3)'>третью ссылку</span> вы увидите третье всплывающее окно.

<div id="win[1]" class="bar">

<div style="float: left">Окно #1</div>
<div align="right"><span class='closespan' onclick='hide_bar(1)'>x</span></div>

<br>
Первое всплывающее окно...

</div>

<div id="win[2]" class="bar">

<div style="float: left">Окно #2</div>
<div align="right"><span class='closespan' onclick='hide_bar(2)'>x</span></div>

<br>
Второе всплывающее окно...

</div>

<div id="win[3]" class="bar">

<div style="float: left">Окно #3</div>
<div align="right"><span class='closespan' onclick='hide_bar(3)'>x</span></div>

<br>
Третье всплывающее окно...

</div>
</div>

Надеюсь вы уже разобрались, что к чему. Мы создаем несколько div, по одному на каждое окно, и присваиваим им разные id: win[1], win[2], win[3]... по этим id и будет выполнятся отображение/скрытие соответствующих окон.

Также я добавил параметр closewindow. Если этот параметр установить в true, то окна будут отображаться поочереди, то есть если открыто первое окно, и пользователь нажмет на вторую ссылку, первое окно автоматически исчезнет.

Все вопросы отписывайте в комментариях или на форуме. Пример работающего скрипта ниже:

При нажатии на первую ссылку вы увидите первое всплывающее окно, при нажатии на вторую - второе всплывающее окно. При нажатии на третью ссылку вы увидите третье всплывающее окно.

webobzor.net

Anterot   05.11.2007  12:13 Спасибо тебе! Класный скрипт! Вот что у меня получилось http://ordenplameni.tclans.ru/grin/karta.php

Алексей  18.01.2008  23:05 Спасибо! Отличный рецепт! Только один момент: в шапке страницы не должно быть упоминаний о придерживании стандартам xhtml, иначе работать будет криво. ----- И тебе, Anterot, спасибо - скриптик чуть подправил по твоему примеру.

Kifirus    29.02.2008  04:03 Всем ку! помогите мне пожалуйсто... мне ещё нужно чтобы это окно открывалось чётко посередине экрана... ещё хотелось бы что нибудь типо прелоада... непоказывает весь сайт пока он не прогрузится или определённое время с бегающей строчкой такой...

lexa29  05.03.2008  14:01 отцентрируй, а вообще есть хочешь помощь по коду, то на форум... сюда код не скинется

Andrey  23.11.2008  22:38 Скрипт хороший, только столкнулся с 1 проблемой, у меня в этом окне много картинок, так вот они грузятся вместе со страницей. А как сделать, чтоб они начинали грузится только после того как нажму ссылку на открытие окна?

lexa  24.11.2008  16:23 вот так http://art.webobzor.net/art/130.php

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