Офис НП 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 (достаточно версии min), если ты забыл, делается это так:
Соответственно, папку и название файла поставишь свои. На большинстве ресурсов данная библиотека уже подключена, поэтому тебе, возможно, данное действие и не потребуется. Идем далее.
Там же, до закрывающего тега </head> добавляешь следующее:
То есть теперь у нас див, равный id div1, будет всплывать при загрузке страницы и плавно "затухать" через четыре секунды (1000мс = 1с, 5000-1000=4000), данные параметры можешь изменить на удобные тебе. Далее- сам вывод необходимого контента, который будет воспроизведен в модальном окне через секунду после загрузки страницы и плавно исчезнет через 4 секунды, просто вешаешь #div1 на нужный тебе div:
Как ты заметил, у меня в стиле идет выравнивание по центру и свойство position задано как relative. Просто я делал это под свои нужды: у меня это вывод подсказок ошибок при заполнении формы, то есть мне нужно было, чтобы ошибки всплывали именно там, где им и положено быть. Ты же можешь поставить position: absolute; и задать положение элемента через left, right, top и bottom. Также можешь задать цвет фона через background-color, я этим не заморачивался, у меня был уже готовый класс для ошибок, я его и прилепил.
Ну что ж, надеюсь, данное всплывающее оповещение или подсказка при загрузке страницы будет тебе полезно, мой многоуважаемый читатель. Всего доброго.
Код: 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, я этим не заморачивался, у меня был уже готовый класс для ошибок, я его и прилепил.
Ну что ж, надеюсь, данное всплывающее оповещение или подсказка при загрузке страницы будет тебе полезно, мой многоуважаемый читатель. Всего доброго.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:
Последние активные темы форума
Темы | Просмотров | Ответов | Последние сообщения | |
Вопрос по переделке bb-кода PHP, MySQL |
22814 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
71526 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15696 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
18361 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
149835 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14852 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
23159 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26942 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7818 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
38049 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
12010 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31443 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
133087 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8988 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23490 | 13 | Pisatel 03. апреля 2015 |