Все для вебмастера | MOGUTAHELP.RU

Зарегистрируйте бесплатный аккаунт чтобы стать участником нашего портала! После входа в систему вы сможете получить доступ к информации для пользователей , добавлять свои собственные темы и сообщения, а также общаться с другими участниками!

Полезное Панель уведомления для сайта на html+JS.

DyshaKuzbass

Главный постоялец
Проверенный
Премиум+
Отзыв
2 (100%)
Сообщения
268
Баллы
115
1875

Приветствую вас, господа форумчане!
Как-то на одном из сайтов увидел такую штуку, как при заходе на сайт появляется появляется панелька уведомлений!
Решил глянуть *.html-код и оказалось ничего сложного!

Панелька представляет собой обычный *.html-код + *.JS-скрипт!

При первом посещении сайта она выплывает сверху и в которой может содержаться любой текст, либо картинка!
В *.JS-коде присутствует сессия, так что, при её закрытии (панельки) она более не будет показываться, а покажется через определённое время! Это, типа, своего рода, модальное окно!

Приступим!

В любом месте вашего сайта (я у себя сделал это в footer`e) вставляем *.html-код и *.JS-код:

notify:
<div style="background-color: #1977CA; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 100; display: none;" class="topWarning" >
<div style="padding: 15px; max-width: 1100px; color: white; margin: 0 auto; text-align: center;" >
<p>Тут ваш любой текст или какая-нить картинка! :0)</p>
<div style="text-align: center;" >
<span style="cursor: pointer; text-decoration: underline; color: white; display: inline-block; margin-top: 10px;" class="hideTopWarning" >Скрыть уведомление</span>
</div>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var cookieOptions = {expires: 3, path: '/'};
        $(document).on('click','.hideTopWarning', function (e) {
            $(".topWarning").hide();
            $.cookie("topWarning", "hide", cookieOptions);
        });   
        if($.cookie("topWarning") != "hide" || !$.cookie("topWarning")){
           setTimeout('$(".topWarning").show()', 2000);
        }
    });
</script>
Ну вот и всё! Как говориться: "Мелочь, а приятно!". Можете *.html-код "вертеть" как хочется! )

С уважением Йа! ;0)
 
Верх