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

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

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

Вам понадобится
  • Базовые знания языка HTML.
Инструкция
1
всплывающее окно, HTML-код, скрытый слой
2
На многих страницах в сети можно увидеть, что для создания в страницах всплывающих окон привлекаются навороченные библиотеки различных JavaScript-фреймворков (jQuery, MooTools, Prototype и т.д.). Однако на самом деле в них нет необходимости при решении именно этой задачи. Для создания всплывающих окон вполне достаточно средств, имеющихся в языке разметки гипертекста (HTML) и языке описания каскадных таблиц стилей (CSS). Создаваемые этим способом окна будут работать независимо от того, включена ли в браузере посетителя поддержка JavaScript.Весь код, создающий всплывающее окно можно разместить в двух строках. Первая строка создает ссылку, которую надо щелкнуть, чтобы отобразилось всплывающее окно:<a onmouseover=&#8217;this.style.cursor="pointer" &#8216; onfocus=&#8217;this.blur();&#8217; onclick="document.getElementById(&#8216;PopUp&#8217;).style.display=&#8217;block’"><span style="text-decoration: underline;">Щелкать здесь!</span></a>Здесь атрибут onmouseover тега ссылки задает стандартный для ссылок тип курсора при наведении мыши. Атрибут onclick указывает, что при щелчке по ссылке скрытый блок с идентификатором PopUp должен стать видимым.Вторая строка — это, собственно, и есть всплывающее окошко. Слой с идентификатором PopUp и заданными в атрибуте style размерами окна, цветом и размером текста, фона и рамки:<div id=&#8217;PopUp&#8217; style=&#8217;display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;&#8217;>Это текст во всплывающем окне</div>По умолчанию он не виден — на это указывает селектор display со значением none в описании стиля слоя.Собственно, это и все что нужно для создания всплывающего окна — разместите эти два строки между тегами <body> и </body> вашей страницы и оно готово к работе.
3
Чтобы иметь возможность закрыть всплывающее окно перед тегом </div> нужно добавить ссылку, выполняющую обратное действие — скрывающую видимый слой с идентификатором PopUp:<br /><div style=&#8217;text-align: right;&#8217;><a onmouseover=&#8217;this.style.cursor="pointer" &#8216; style=&#8217;font-size: 12px;&#8217; onfocus=&#8217;this.blur();&#8217; onclick="document.getElementById(&#8216;PopUp&#8217;).style.display = &#8216;none&#8217; " ><span style="text-decoration: underline;">закрыть</span></a></div>
4
А если вы хотите, чтобы окошко всплывало не по щелчку, а при наведении курсора мыши, то первую строку со ссылкой нужно модифицировать таким образом:<a onmouseover="document.getElementById(&#8216;PopUp&#8217;).style.display = &#8216;block&#8217; " onmouseout="document.getElementById(&#8216;PopUp&#8217;).style.display = &#8216;none&#8217; " onfocus=&#8217;this.blur();&#8217;><span style="text-decoration: underline;">навести мышь сюда!</span></a>
5
С принципом и структурой кода всплывающего окна вы теперь знакомы, а оформление его внешнего вида и содержимого целиком зависит от ваших целей и фантазии.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *