Офис НП 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 » Всплывающее модальное окно при загрузке страницы
Сниппет
Весьма полезное иногда дополнение к юзабилити твоего проекта- всплывающая подсказка при загрузке страницы. Оказывается, реализация весьма проста.
Всплывающее модальное окно при загрузке страницы
Опубликовал  Pisatel Pisatel Добавлено  17-04-2013 10:06 17 Апрель 2013 10:06:41 13717  Прочтений 13717 Прочтений
Обновлено: 01-09-2016 18:30 Обновлено: 01 сентября 2016 18:30:44  printer
Согласись, будет смотреться весьма симпатично, если пользователь, зайдя на страницу, увидит какое-либо объявление, предупреждение или любой другой контент, который исчезнет через несколько секунд. Реализация данного всплывающего модального окна- весьма проста. Нам нужно только подключить библиотеку JQuery (достаточно версии min), если ты забыл, делается это так:
Код: HTML
<head>
<script src='scripts/jquery_min.js'>
</head>



Соответственно, папку и название файла поставишь свои. На большинстве ресурсов данная библиотека уже подключена, поэтому тебе, возможно, данное действие и не потребуется. Идем далее.
Там же, до закрывающего тега </head> добавляешь следующее:
Код: JQUERY
<script>
$(document).ready(function() {
setTimeout("$('#div1').fadeIn('fast');", 1000);
setTimeout("$('#div1').fadeOut('slow');", 5000);
});
</script>



То есть теперь у нас див, равный id div1, будет всплывать при загрузке страницы и плавно "затухать" через четыре секунды (1000мс = 1с, 5000-1000=4000), данные параметры можешь изменить на удобные тебе. Далее- сам вывод необходимого контента, который будет воспроизведен в модальном окне через секунду после загрузки страницы и плавно исчезнет через 4 секунды, просто вешаешь #div1 на нужный тебе div:
Код: HTML
<div id='div1' align='center' style='display: none; position:relative; width:500px;'>Здесь текст или контент, который необходимо вывести в модальном окне</div>



Как ты заметил, у меня в стиле идет выравнивание по центру и свойство position задано как relative. Просто я делал это под свои нужды: у меня это вывод подсказок ошибок при заполнении формы, то есть мне нужно было, чтобы ошибки всплывали именно там, где им и положено быть. Ты же можешь поставить position: absolute; и задать положение элемента через left, right, top и bottom. Также можешь задать цвет фона через background-color, я этим не заморачивался, у меня был уже готовый класс для ошибок, я его и прилепил.
Ну что ж, надеюсь, данное всплывающее оповещение или подсказка при загрузке страницы будет тебе полезно, мой многоуважаемый читатель. Всего доброго.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
22330 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
68545 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
15357 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
17888 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
144805 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
14416 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
22550 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
26238 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
7665 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
36989 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
11793 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
31034 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
128304 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
8842 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
23180 13 Pisatel
03. апреля 2015