Last active
March 15, 2022 15:10
-
-
Save al-ivanov/c7c96683042fa0baebc53706fb571f41 to your computer and use it in GitHub Desktop.
Подтверждение возраста
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function getCookie(name) { | |
| const matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); | |
| return matches ? decodeURIComponent(matches[1]) : undefined; | |
| } | |
| const ageControl = getCookie('age-control'); | |
| if (ageControl === undefined) { | |
| $.fancybox.open($('.js-age-control'), { | |
| clickSlide: false, | |
| clickOutside: false, | |
| touch: false, | |
| modal: true | |
| }); | |
| } | |
| const setAgeControl = () => { | |
| $.fancybox.close(); | |
| document.cookie = "age-control=1"; | |
| } | |
| $('.js-confirm-age').on('click', setAgeControl); | |
| $('.js-confirm-age').on('touchstart',setAgeControl); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="display: none" class="js-age-control"> | |
| <?=$ageControl['text']?> | |
| </div> | |
| /* | |
| в админке добавить поле ageControl с типом [3]HTML редактор | |
| <div class="age__overlay"> </div> | |
| <div class="b-age"> | |
| <div class="age__inner"><img alt="18+" src="/files/110/age.svg" /> | |
| <div class="age__title">ВОЗРАСТНОЕ ОГРАНИЧЕНИЕ</div> | |
| <p>Информация на сайте предназначена для посетителей старше 18 лет.</p> | |
| <p>Для доступа к ней подтвердите, пожалуйста, своё совершеннолетие.</p> | |
| <div class="age__btn"><a class="js-confirm-age age__confirm" href="#">Подтвердить</a></div> | |
| </div> | |
| </div> | |
| <!-- <div class="js-confirm-age">Да</div> --> | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*-------------------------------------*/ | |
| .b-age { | |
| background-color: #fff; | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 120px 60px; | |
| text-align: center; | |
| z-index: 101; | |
| } | |
| .age__overlay { | |
| width: 100%; | |
| height: 100%; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| background-color: rgba(255,255,255, .5); | |
| z-index: 100; | |
| } | |
| .b-age img { | |
| width: 180px; | |
| height: auto; | |
| } | |
| .b-age .age__title { | |
| margin: 60px 0 40px; | |
| font-weight: 600; | |
| font-size: 40px; | |
| color: #000; | |
| line-height: 1.35; | |
| } | |
| .b-age p { | |
| font-size: 20px; | |
| font-weight: 300; | |
| line-height: 1.4; | |
| } | |
| .b-age .age__btn a { | |
| margin-top: 40px; | |
| padding: 19px 38px; | |
| border: 1px solid #000; | |
| display: inline-block; | |
| text-decoration: none; | |
| color: #000; | |
| transition: .2s; | |
| } | |
| .b-age .age__btn a:hover, | |
| .b-age .age__btn a:focus, | |
| .b-age .age__btn a:active { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| /*-------------------------------------*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment