Инструкция
1
Создание всплывающих страниц может производиться на основе JavaScript. Тем не менее, есть более простой вариант – использование языка разметки гипертекста HTML и языка таблиц CSS. Удобство заключается в том, что созданные таким образом окна будут поддерживаться большинством браузеров вне зависимости от того, поддерживают ли они JavaScript.
2
Подобный код размещается в двух сроках, в первой строке содержится ссылка, которая отвечает за открытие окошка, вторая строка – по сути, и является всплывающим окном, атрибут onmouseover говорит о том, что будет отражаться стандартный при наведении на строку ссылки тип курсора, onclick указывает на то, что после щелчка скрытое окно станет видимым:
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Нажать здесь!</span></a>
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Нажать здесь!</span></a>
3
Вам потребуется указать размеры окна, цвет и размер текста, фон и рамки. Все эти параметры вы можете указать в атрибуте style. Цветa указывается по кодовой таблицe rgb. В стандартном инструменте Paint в окне «Изменение цветов», в можете найти код нужного оттенка, где R – красный, G – зеленый, В – синий (голубой). Так черный цвет имеет код rgb(0,0,0), белый rgb(255,255,255), серый rgb(126,126,126).
<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 делает ваше окно невидимым.
<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 делает ваше окно невидимым.
4
Теперь вам нужно разместить две эти строчки между тегами вашей страницы <body> и </body>. После этого всплывающее окно готово к работе.
5
Однако при данном наборе вы получите постоянно открытое окно. Так что, если вам нужно, чтобы всплывающее окно можно было закрыть, добавьте ссылку, которая будет отвечать за это действие, перед тегом </div>:
<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>
<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>
6
Вероятно, вы захотите сделать окно, всплывающее не по щелчку, как описано выше, а при наведении курсора. Тогда первая строчка должна быть записана так:
<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>
<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>
7
Таким образом, HTML-код всплывающего окна вы получили, и знакомы со структурой его составления. Все что осталось – оформить внешний вид и содержимое, что, естественно, будет зависеть от ваших умений, цели и фантазии. Но надо помнить, что это простейший вариант создания всплывающего окна. Если вы владеете достаточным навыком программирования в JavaScript (MooTools, jQuery, Prototype и пр.), вы можете создать более красивую и интересную страницу.
Видео по теме