Доброго времени суток 🙂
Спочатку зробимо просто віконце спливаюче з затримкою при завантаженні сторінки. Приклад того що у нас з Вами вийде можна подивитися нижче.
Спочатку додамо HTML код нашого віконця. Тут все просто. Основний блок самого вікна з id = "msg_pop". і кнопка закриття з class = "msg_close".
Забігаючи наперед, скажу, що можна це віконце запускати натисканням на будь-який елемент - посилання, span, div і тд. Тобто, якщо Вам не потрібно запускати вікно автоматом з затримкою, а саме при натисканні на кнопку або посилання і тд. то потрібно буде пропустити крок з додаванням скрипта, а замість цього тому елементу, при натискання на який має бути викликано віконце - теж додати подію onclick.
І так, як приклад у нас буде кнопка - звичайний span. Вам потрібно взяти свій елемент і такий же span і додати туди подія, в результаті вийде приблизно так:
Тепер додамо скрипт автоматичного виклику вікна. Якщо Ви вирішили запускати вікно з кнопки, як описано вище, то пропустіть цей крок.
В шапку сайту або підвал, особливо не важливо, можна поруч з самим віконцем додати ось такий маленький скрипт.
Ну і останній крок - це стилі самого вікна. Розписувати детально, що за що відповідає не буду. Вивчайте CSS. Це просто, легко і дуже стане в нагоді Вам, якщо Ви вирішили самі займатися вебмастерством. У стилях все просто, якщо ви знайомі з CSS.
Скажу лише те що тут три основних параметри. Перший, це параметри для основного блоку з айди - msg_pop.Тут головна умова - display: none;
Далі параметри для кнопки закриття - msg_close. Ну і останнє це клас fadeIn і властивості @keyframes - для створення анімації.
Скажу ще одну ВАЖЛИВУ! річ. У властивостях анімації є параметр animation-duration: 0.4s; і ще один його клон для хрому. Це час анімації. Як бачите воно більше часу затримки вікна. Якщо ви збільшите час затримки, то потрібно буде погратися і з часом анімації, та й з її візуалізацією. В іншому випадки, анімація буде закінчуватися ще до того, як з'явиться вікно.
Якщо Ви вирішили зробити так, щоб вікно з'являлося лише раз на добу, наприклад, або раз на годину, то Вам потрібен цей спосіб. Скажу відразу, він вже використовує - jQuery.
Показ раз на добу буде здійснюватися за допомогою cookie. Стилі і код вікна залишається той же. Замість яваскрипт, потрібно додати трохи інший скрипт. Приклад того, що вийде можете подивитися в прикладі нижче.
Для початку, потрібно підключити бібліотеку - jQuery. Якщо це робилося раніше або це робить на Вашому сайті, то це робити не потрібно. Підключати потрібно в шапці або в підвалі сайту.
Далі підключаємо файл відповідає за формування cookie. Даний файл потрібно завантажити - jquery.cookie.js
Підключити файл куків потрібно після бібліотеки вказавши шлях до папки, де ви його розташували, якщо він знаходиться в тій же папці де і файл з html, то просто його назва.
Тут по суті теж не багато налаштувань. Про імена айди і класів, я думаю зрозуміло, де що і у випадку зміни міняти потрібно і тут.
У 3 рядку вказано час дій куків. Воно дорівнює довжині сесії. Якщо Ви хочете його змінити, то ознайомтеся з статтею - Спливаюче вікно при завантаженні сторінки показується один раз із затримкою. Там є інструкція з цього приводу. Повторно пояснювати не бачу сенсу.
Ось власне і все, що потрібно для здійснення другого варіанту з куками. Пробуйте, експериментуйте і отримаєте потрібний результат.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Добрий день. потрібно просто додати запуск відтворення.
$ ( "") .attr ( 'src': '123.mp3',
'Volume': 0.4,
'Autoplay': 'autoplay'
>). AppendTo ( "body");
У цьому коді ми додаємо аудіофайл 123.mp3 на сторінку сайту. До нього потрібно вказати правильний шлях і назву.
'Volume': 0.4, - звук 0,4 від макс гучності. і 'autoplay': 'autoplay' - Автовідтворення.
Цей код потрібно додати у вже наявний скрипт, вийде так:
jQuery (document) .ready (function ($) $ ( "# msg_close"). click (function () $ .cookie ( "msg_pop", "",);
$ ( "# Msg_pop"). Hide ();
>);
if ($ .cookie ( "msg_pop") == null) setTimeout (function () $ ( "# msg_pop"). addClass ( "fadeIn");
$ ( "# Msg_pop"). Show ();
$ ( "") .attr ( 'src': '123.mp3',
'Volume': 0.4,
'Autoplay': 'autoplay'
>). AppendTo ( "body");
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце