Вам понадобится
  • Базовые знания языка HTML.
Инструкция
1
всплывающее окно, HTML-код, скрытый слой
2
На многих страницах в сети можно увидеть, что для создания в страницах всплывающих окон привлекаются навороченные библиотеки различных JavaScript-фреймворков (jQuery, MooTools, Prototype и т.д.). Однако на самом деле в них нет необходимости при решении именно этой задачи. Для создания всплывающих окон вполне достаточно средств, имеющихся в языке разметки гипертекста (HTML) и языке описания каскадных таблиц стилей (CSS). Создаваемые этим способом окна будут работать независимо от того, включена ли в браузере посетителя поддержка JavaScript.
Весь код, создающий всплывающее окно можно разместить в двух строках. Первая строка создает ссылку, которую надо щелкнуть, чтобы отобразилось всплывающее окно:
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Щелкать здесь!</span></a>
Здесь атрибут onmouseover тега ссылки задает стандартный для ссылок тип курсора при наведении мыши. Атрибут onclick указывает, что при щелчке по ссылке скрытый блок с идентификатором PopUp должен стать видимым.
Вторая строка - это, собственно, и есть всплывающее окошко. Слой с идентификатором PopUp и заданными в атрибуте style размерами окна, цветом и размером текста, фона и рамки:
<div id='PopUp' style='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;'>Это текст во всплывающем окне</div>
По умолчанию он не виден - на это указывает селектор display со значением none в описании стиля слоя.
Собственно, это и все что нужно для создания всплывающего окна - разместите эти два строки между тегами <body> и </body> вашей страницы и оно готово к работе.
3
Чтобы иметь возможность закрыть всплывающее окно перед тегом </div> нужно добавить ссылку, выполняющую обратное действие - скрывающую видимый слой с идентификатором PopUp:
<br /><div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">закрыть</span></a></div>
4
А если вы хотите, чтобы окошко всплывало не по щелчку, а при наведении курсора мыши, то первую строку со ссылкой нужно модифицировать таким образом:
<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">навести мышь сюда!</span></a>
5
С принципом и структурой кода всплывающего окна вы теперь знакомы, а оформление его внешнего вида и содержимого целиком зависит от ваших целей и фантазии.