Pisatel
Всем здравствуйте. Хочу поделиться с Вами простейшим, на мой взгляд, способом добавить на Ваш сайт всплывающее окно подсказки. Возможно, пригодится кому.
Ранее для этого я пользовался jquery, картинкой и целой кучей кода. Немного погуглив, я нашел более простой и удобный способ. Итак, начали.
Сам html:
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('okno').style.display='block'"><span>Подсказка</span></a>
<br />
<div id='okno' style='display: none;'>Здесь будет текст Вашего всплывающего окна<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('okno').style.display = 'none' ">Закрыть</a></div></div>
Думаю, особо комментировать здесь нечего: создаем ссылку, задаем вид курсора при наведении в виде стрелки. Далее- сам CSS. Я немного изменил его, добавил градиент (плавный переход цвета), закруглил углы, добавил небольшой эффект, который придает симпатяшности нашему окну. Итак, сам код и небольшие комментарии.
CSS:
#okno {
display: none; /*закрываем от показа при загрузке страницы*/
position: absolute;
left: 30px; /*смещаем вправо*/
top: -30px; /*вверх*/
z-index: 1; /*возвышаем над другими элементами, на всякий случай*/
border: 1px solid #FFAE00;
border-radius: 12px; /*округляем*/
padding: 10px;
background-color: #ff5a00;
background-image: linear-gradient(top, #ff5a00, #FFAE00); /*градиент (плавный переход цвета) сверху- вниз*/
background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);
background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);
background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);
background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00); /*на всякий случай для каждого арбузера*/
text-align: justify;
font-size: 12px;
font-style: italic;
font-weight: bold;
text-shadow: 1px 0 0 #000; /*тень шрифта*/
width: 420px;
}
/*делаем симпатичный указатель*/
#okno:after {
content: '';
position: absolute;
width: 0;
height: 0;
z-index: 1;
border: 15px solid transparent; /*делаем квадрат прозрачным. Без transparent квадрат будет белым*/
border-top-color: #FFAE00; /*красим верхний треугольник квадрата*/
top: 100%;
left: 10%; /*располагаем со смещением вправо на 10%. Если поставите 50%, то будет посередине*/
margin-left: -15px;
}
Как видите, в общем, ничего сложного. Если Вы хотите, чтобы окно открывалось не по клику, а по наведению курсора, то просто меняем первую строчку на это:
<a onmouseover="document.getElementById('okno').style.display = 'block' " onmouseout="document.getElementById('okno').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration:underline;">Подсказка</span></a>
На этом все. Надеюсь, кому-нибудь пригодится. На скриншоте результат с оперы мобайл. Кроссбраузерность: как всегда, старые IE нуждаются в фильтрах, так как отображают градиент по-своему.
П.С. Материал найден в сети в свободном доступе, отредактирован и объединен мной специально для xwab.mobi.
