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

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

Вам понадобится

• Базовые знания языка HTML.

Инструкция

всплывающее окно, HTML-код, скрытый слой

На многих страницах в сети можно увидеть, что для создания в страницах всплывающих окон привлекаются навороченные библиотеки различных JavaScript-фреймворков (jQuery, MooTools, Prototype и т.д.). Однако на самом деле в них нет необходимости при решении именно этой задачи. Для создания всплывающих окон вполне достаточно средств, имеющихся в языке разметки гипертекста (HTML) и языке описания каскадных таблиц стилей (CSS). Создаваемые этим способом окна будут работать независимо от того, включена ли в браузере посетителя поддержка JavaScript.Весь код, создающий всплывающее окно можно разместить в двух строках. Первая строка создает ссылку, которую надо щелкнуть, чтобы отобразилось всплывающее окно:Щелкать здесь!Здесь атрибут onmouseover тега ссылки задает стандартный для ссылок тип курсора при наведении мыши. Атрибут onclick указывает, что при щелчке по ссылке скрытый блок с идентификатором PopUp должен стать видимым.Вторая строка - это, собственно, и есть всплывающее окошко. Слой с идентификатором PopUp и заданными в атрибуте style размерами окна, цветом и размером текста, фона и рамки:Это текст во всплывающем окне По умолчанию он не виден - на это указывает селектор display со значением none в описании стиля слоя.Собственно, это и все что нужно для создания всплывающего окна - разместите эти два строки между тегами и вашей страницы и оно готово к работе.

Чтобы иметь возможность закрыть всплывающее окно перед тегом нужно добавить ссылку, выполняющую обратное действие - скрывающую видимый слой с идентификатором PopUp:

закрыть

А если вы хотите, чтобы окошко всплывало не по щелчку, а при наведении курсора мыши, то первую строку со ссылкой нужно модифицировать таким образом:навести мышь сюда!

С принципом и структурой кода всплывающего окна вы теперь знакомы, а оформление его внешнего вида и содержимого целиком зависит от ваших целей и фантазии.

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