Как сделать плавающее окно?

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

Инструкция

Вставьте в код вашей страницы теги, добавляющие библиотеку jQuery. Выглядят данные теги вполне стандартно:script type="text/javascript" src="jQuery.js"/scriptscript type="text/javascript" src="interface.js"/script

Добавьте в файл стилей css код для создания стиля всплывающего окна. Укажите такие параметры, как position, height, overflow, background-image, background-position, background-repeat, overflow, cursor и другие, которые вам могут понадобиться для оформления. Эти параметры также можно задать в теге head, если у вас нет в стандартной работе принципа выделять для стилей специальный файл. Вы можете писать код и другими способами, используя при этом различные теги. Как правило, имеется большое количество способов написания плавающих окон.

Вставьте код ссылку на всплывающее окно в тело страницы, и опишите сам скрипт открытия всплывающего окна. Опишите функцию для вызова окна с помощью стандартных команд show(), TransferTo(), bind() и других. Старайтесь рядом с каждой функцией писать для себя не большое описание, чтобы не путаться в коде, так как можно полностью нарушить работу всей системы.

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

Оцените статью!