Технология "окно в окне" применяется такими авторитетными веб ресурсами как Yandex (вход в почту) и Bigmir (авторизация на сайте) и представляет собой открывающееся окно с формой для авторизации.

На самом деле в такое окно можно поместить все что угодно, от простого текста до элементов формы и изображений.

Создание такого всплывающего окна осуществляется при помощи JavaScript и свойства position: absolute, которое позволяет свободно позиционировать элементы в документе.

Пример:

< style>

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

< /style>

< script language=JavaScript>

function show_bar() {

MouseX = event.clientX + document.body.scrollLeft;
MouseY = event.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()'>слова< /span>, выделенные другим цветом под ними будет < span style='cursor: pointer; color: #FF0000' onclick='show_bar()'>открываться< /span> всплывающее окно.

< div id=win class=bar>
< div align=right>
< span style='cursor: pointer' title='Закрыть' onclick='hide_bar()'>x< /span>
< /div>
Тестовое окно.< br>
В нем можно разместить не только текст,< br> но и элементы формы, изображения.
< /div>

Рассмотрим основные особенности скрипта. Во-первых мы задаем свойство position: absolute обекта win (элемент div). Теперь мы можем свободно позиционировать данный элемент изменяя его top и left. При помощи visibility: hidden мы скрываем данный элемент.

Две функции show_bar() и hide_bar() отображают и скрывают элемент win. В show_bar() определяются координаты текущего положения указателя мыши

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

всплывающее окно позиционируется ниже и отображается

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

Само всплывающее окно представляет собой контейнер div, в котором размещаются остальные объекты.

Для примера, нажмите по одному из слов, выделенных в предложении ниже:

При нажатии на слова, выделенные другим цветом под ними будет открываться всплывающее окно. x
Тестовое окно.
В нем можно разместить не только текст,
но и элементы формы, изображения.