HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="c-modal" > <div class="c-modal__row"> <div class="c-modal__left"> <p>Продолжая просмотр сайта, я соглашаюсь с использованием файлов cookie владельцем сайта в соответствии с Политикой в отношении файлов cookie, в том числе на передачу данных, указанных в Политике, третьим лицам (статистическим службам сети Интернет).</p> </div> <div class="c-modal__right"> <a class="btn btn--mob-all-w c-modal__btn" href="#" id="yes" >Принять</a> </div> </div> </div> |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script type="text/javascript"> var messageElement = document.querySelector('.c-modal'); // Если нет cookies, то показываем плашку if (!Cookies.get('agreement')) { showMessage(); } else { initCounter(); } // Загружаем сам код счетчика сразу (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document,'script','//mc.yandex.ru/metrika/tag.js', 'ym') // Функция добавляет класс к DOM-элементу. Вы можете использовать библиотеку jQuery или другой фреймворк function addClass (o, c) { var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g"); if (!o || re.test(o.className)) { return; } o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, ""); } // Функция удаляет класс из DOM-элемента. Вы можете использовать библиотеку jQuery или другой фреймворк function removeClass (o, c) { var re = new RegExp('(^|\\s)' + c + '(\\s|$)', 'g'); if (!o) { return; } o.className = o.className.replace(re, '$1').replace(/\s+/g, ' ').replace(/(^ | $)/g, ''); } // Функция, которая прячет предупреждение function hideMessage () { addClass(messageElement, 'c-modal--hide'); removeClass(messageElement, 'c-modal--show'); } // Функция, которая показывает предупреждение function showMessage () { addClass(messageElement, 'c-modal--show'); } function saveAnswer () { // Прячем предупреждение hideMessage(); // Ставим cookies Cookies.set('agreement', '1'); } // Указываем вместо ХХХХХХ код светчика function initCounter () { try { ym(ХХХХХХ, 'init', {}); } catch(e){ console.log(e); } saveAnswer(); } // Нажатие кнопки "Я согласен" document.querySelector('#yes').addEventListener('click', function () { initCounter(); }); </script> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/*start-cookie-modal*/ .c-modal { border: 0.0625rem solid #ccc; position: fixed; width: calc(100% - 2.5rem); display: none; left: 50%; transform: translateX(-50%); bottom: 0; background: #fff; max-width: 79rem; padding: 1.25rem; z-index: 1000; } @media only screen and (min-width: 1279px) { .c-modal { bottom: 3.625rem; } } @media only screen and (min-width: 576px) { .c-modal { bottom: 1.25rem; padding: 1.25rem 1.875rem; } } @media only screen and (min-width: 576px) { .c-modal__row { width: 100%; display: flex; align-items: flex-end; } } .c-modal p { font-weight: 500; font-size: 0.875rem; line-height: 1.3; color: #001022; margin: 0; } @media only screen and (max-width: 576px) { .c-modal p { font-weight: 500; font-size: 14px; line-height: 20px; margin-bottom: 0.75rem; } } .c-modal__right { flex-shrink: 0; padding-left: 0rem; } @media only screen and (min-width: 576px) { .c-modal__right { padding-left: 1.875rem; } } .c-modal__btn { min-width: auto; } @media only screen and (max-width: 991px) { .btn--mob-all-w { width: 100%; } .c-modal { width: 100%; } } .btn.c-modal__btn { background: #1c4070; border: none; color: #ffffff; } .btn.c-modal__btn:hover { background: #00aeef; } .c-modal--hide { display: none!important; } .c-modal--show { display: block!important; } /*end-cookie-modal*/ |
