Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Всплывающее окно без использования JQuery. HTML + CSS +JS
Сниппет
Понадобилось тут мне как-то сделать всплывающую подсказку на одном сайте. Нужно было что-нибудь простое, желательно без JS, дабы не перегружать страницу лишним кодом, да и мне мозг особо не парить. Немного погуглив, нашел-таки решение, коим и хочу поделиться с тобой, достопочтенный читатель. Для привлекательности я исчо и саму форму вывода добавил, короче- читай далее...
Всплывающее окно без использования JQuery. HTML + CSS +JS
Опубликовал  Pisatel Добавлено  09-02-2013 10:01 09 Февраль 2013 10:01:07 9462  Прочтений 9462 Прочтений  5 Комментариев 5 Комментариев
 printer
Хочу поделиться с Вами простейшим, на мой взгляд, способом добавить на Ваш сайт всплывающее окно подсказки.
Ранее для этого я пользовался jquery, картинкой и целой кучей кода. Немного погуглив, отыскал более простой и удобный( простой- ключевое слово, это я люблю! ) способ. Итак, погнали.
Сам HTML:
Код: JAVASCRIPT
<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;
}



Как видите, в общем, ничего сложного. Если Вы хотите, чтобы окно открывалось не по клику, а по наведению курсора, то просто меняем первую строчку на эту фигню:
Код: JAVASCRIPT
<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 нуждаются в фильтрах, так как отображают градиент по-своему.
Если кто-то считает, что код устарел, что аффтар- герантофил и тому подобное, идите мимо и не задерживайте движение. Всего доброго!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | Dima 20 февраля 2015 22:31:43
No Avatar
Гость
спасибо)
#2 | Pisatel 21 февраля 2015 08:33:21
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Пожалуйста) Но я бы, конечно, рекомендовал использование JQuery, например, так как в статье описывается метод, "засоряющий" разметку. Либо вынос js в шапку или ноги как минимум.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#3 | StepSwano 07 марта 2020 23:27:35
No Avatar
Гость
Child Dosage For Amoxicillin generic cialis Discount Generic Hydrochlorothiazide 25mg <a href=https://apcialisle.com/#>Buy Cialis</a> Difference Between Cephalexin And Clavamox
#4 | Janfeemivy 29 марта 2020 16:12:42
No Avatar
Гость
Zovirax Discount Online cialis online without prescription Forum Cialis Sur Internet <a href=https://buyciallisonline.com/#>buy cialis online with prescription</a> Amoxicillin 500 Dosage
#5 | Janfeemivy 04 апреля 2020 05:13:18
No Avatar
Гость
Viagra Pour Homme Prix Maroc Cialis Levitra 20 Mg Efectos Secundarios <a href=https://buyciallisonline.com/#>buy cialis 5mg daily use</a> Buy Nexium Canada
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
16371 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
4084 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
17461 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
8594 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
8721 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
59126 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
5443 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
9288 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
10977 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3705 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
7142 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
9039 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
48061 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
4298 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
15149 13 Pisatel
03. апреля 2015