Динамическое плавающее окно с помощью javascript

Мне всегда нравился Священный, который позволяет делать всевозможные интересные визуальные вещи. Новые дети в блоке используют jquery. Один из этих двоих должен помочь вам.

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

В большинстве случаев просто создайте div и вставьте контент, установив для innerHTML строку HTML. Позиционировать его может быть сложно, так как вам нужно беспокоиться о прокрутке, а разные браузеры имеют разные средства управления этим. Вы также можете расположить относительно некоторого исходного элемента на странице, что вы можете сделать, выкопав элемент и его положение вне объекта события, которое ваша функция javascript получает при щелчке по исходному элементу.

Всплывающее окно Google Hover - первая ссылка http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html

Существует множество различных библиотек для создания окон. Я обнаружил, что Livepipes имеет очень хорошо продуманную и настраиваемую библиотеку javascript, которая включает в себя элемент управления окном, а также множество других. http://livepipe.net/control Один из них, который я не использовал, но выглядит многообещающим, - это прототип. Он основан на прототипах и скриптовых библиотеках javascript. jqModal - это еще один, который я использовал, он основан на JQuery.

То, что вы ищете, называется техникой «лайтбокса». Вот сравнение многих техник лайтбоксов.

Многие из них существуют в сети, вот некоторые для библиотек jquery и прототипов:

• JQuery: Толстый ящик, Лайтбокс Плагин

• Прототип: Лайтбокс 2, Leightbox

Также ознакомьтесь с статья в Википедии в лайтбоксе.

В пользовательском интерфейсе jQuery есть потрясающее плавающее окно. Что здорово в версии пользовательского интерфейса jQuery, так это то, что вы также можете упаковать ее с помощью диспетчера тем пользовательского интерфейса, что означает меньше времени на стилизацию.

Посмотрите здесь: Примеры диалогового окна пользовательского интерфейса jQuery

Все, что требуется, - это создать контейнер (возможно, div) и одну строку кода. Что-то вроде этого:

<div id = "example">I'm in a dialog!</div>
$("#example").dialog();

Вот документация: документация jQuery UI Dialog

взгляните на fancybox http://fancybox.net/