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

Question

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

Пожалуйста, помогите мне .. Это должно быть в JavaScript .. Лучше без AJAX ..

Заранее спасибо

Answer 1

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

Проверьте это здесь: Примеры диалоговых окон jQuery UI

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

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

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

Answer 2

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

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

• JQuery: Thickbox , Lightbox Plugin

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

Кроме того, проверьте статья в Википедии на лайтбоксе.

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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