13.05.2020, 08:37
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
рони,
Вот что мне нужно было, не знал как правильно сказать, посмотрите может что то коряво написано.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
.main{
max-width: 720px;
margin: 0px auto 0;
padding: 20px 0px 0px 0px;
transition: all .5s .5s;
}
.terms_of_use{
width: 100%;
height: auto;
background-color:#000;
color:#FBAC1C;
padding: 20px 20px 20px 20px;
transform: translateY(-100%);
transition: all .5s .5s;
position: fixed;
z-index: 2;
}
.i_agree{
width: 150px;
height: 50px;
text-align: center;
padding: 14px 0px 0px 0px;
margin: 20px 0px 0px 0px;
background-color: #fff;
border: 2px solid #FBAC1C;
cursor: pointer;
}
.i_agree:hover{
width: 150px;
height: 50px;
text-align: center;
padding: 14px 0px 0px 0px;
margin: 20px 0px 0px 0px;
background-color: #FBAC1C;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
}
.terms_of_use > a{
color: #fff;
}
</style>
<body>
<div class="terms_of_use">
В наших Заявлении о конфиденциальности и Заявлении об использовании файлов cookie разъясняется, как мы собираем и обрабатываем ваши персональные данные и используем файлы cookie для предоставления вам наилучшего и более персонализированного опыта при использовании нашего сайта. Продолжение использования вами этого сайта без изменения настроек означает ваше согласие на использование нами файлов cookie. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, <a href="terms_of_use.html">прочитать</a> <div class="i_agree">Соглашаюсь</div>
</div>
<div class="main">
<h3>Это содержимое тега макета H3</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eveniet, obcaecati aut dignissimos unde porro reiciendis pariatur quibusdam officiis facere, inventore impedit fugiat voluptatum nisi. Rem dolorum sed dolorem, excepturi deserunt cum est, quas deleniti officia unde totam ipsa necessitatibus ullam ipsam! Commodi corporis hic consequatur quas? Voluptatem tempore, doloribus laborum ipsa eum molestiae iusto vel optio numquam sapiente est incidunt, beatae. Praesentium possimus expedita, deserunt illo natus impedit? Sequi odio aspernatur impedit, suscipit id exercitationem, eaque libero neque. Inventore velit facilis ducimus assumenda hic, sed tempora in cupiditate perspiciatis, eos omnis unde? Neque unde nemo quos dicta deserunt tempore qui libero ratione molestiae, impedit quae nostrum dolor praesentium ab ex ut velit nihil quod molestias minus veniam. Earum accusamus, pariatur quia incidunt, quasi nobis dicta quos alias cumque, labore veritatis! Nam illo assumenda eveniet nobis, repudiandae quas! Consequuntur, numquam nemo obcaecati natus distinctio odio doloribus atque error suscipit deleniti, dolore, ducimus perferendis vero provident quibusdam explicabo iusto mollitia delectus, incidunt labore. Beatae perferendis vero incidunt deleniti, veritatis quaerat esse reprehenderit dolores laudantium accusamus sunt harum assumenda natus, dicta quod. Dolore qui unde eum adipisci saepe possimus? Deserunt saepe quibusdam, nemo quo eos repudiandae possimus quidem ipsa aliquam. Cumque dicta voluptas, architecto voluptate repudiandae delectus explicabo odio. Quia aperiam repudiandae quidem quo tempora earum ipsa nihil harum soluta voluptatibus ratione minima, reprehenderit corrupti eum mollitia et, assumenda explicabo tempore! Tenetur explicabo, inventore beatae ipsam unde fugiat recusandae impedit, sint reprehenderit quisquam accusantium ipsum maxime, quaerat dolorem consequatur quam aliquid veritatis corporis harum ratione nesciunt. Provident voluptatibus voluptatem reiciendis, alias laborum eveniet rerum non vitae fugit est, architecto doloribus, quas maxime quibusdam harum voluptate! Amet quidem harum, odit eligendi provident unde rerum, nobis reiciendis optio quis, totam dolor minima architecto illo ea ad blanditiis ab, explicabo officia incidunt nesciunt tempora iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam reiciendis aut totam. Iste minima a, consectetur dolor voluptate minus dolore non perspiciatis ducimus ex eius, omnis tempore illo atque, blanditiis corrupti. Voluptatum atque impedit aliquam sint, magni a laborum, necessitatibus illum ipsum labore voluptatibus voluptas! Cupiditate, quos, aliquid velit voluptatum aperiam tenetur pariatur doloribus quia, maxime accusantium sapiente fuga fugit deserunt at quaerat natus, esse provident ex nisi. Aliquid officiis dolore quo adipisci maiores laborum esse neque veniam distinctio fugiat natus modi, eius mollitia hic, velit, cupiditate accusamus recusandae labore consectetur tempore sapiente consequuntur deserunt facilis. Veritatis aliquid, voluptates vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis perferendis ullam reprehenderit odio velit nulla asperiores quas labore ducimus, quia sint veniam laudantium, sed repellat earum. Illum, possimus soluta incidunt dolor, optio dolorem! Molestias veritatis tenetur in at, nemo deserunt, saepe modi totam blanditiis dicta architecto, hic officiis dignissimos. Porro laborum earum est magni quae. Suscipit aliquam tenetur, voluptatem, officiis, officia dicta aut fugit dolore, ducimus dignissimos molestias libero. Hic eum porro omnis voluptatum in voluptates voluptate iure fugiat quos asperiores ad sunt veniam molestias natus nisi aliquam odit delectus animi beatae, impedit sit dignissimos quaerat ipsum repellat accusamus. Vero, doloribus, ad! Dolorem a quod reprehenderit doloribus reiciendis eius sit commodi odit, sed, totam itaque cupiditate eaque placeat est. Ratione deserunt voluptates sit repudiandae reiciendis accusantium perferendis provident quas magni ipsa, sequi ducimus consequuntur, harum sed aliquid recusandae accusamus, odio qui incidunt. Doloribus consequatur fugiat praesentium magni fugit culpa autem et rerum earum. Repudiandae, alias. Laboriosam unde inventore ab atque vero alias debitis cupiditate suscipit est dicta libero, porro, quia doloremque e voluptatibus aut odio sunt a modi, consequatur. Dicta, esse, libero. Quia earum inventore optio quod ipsa facilis, ea at repellat nesciunt nihil tempore provident recusandae accusantium eveniet minima odio reiciendis alias beatae corporis harum, quis veritatis omnis magnam quidem! Nemo deserunt sint odio sequi facere, doloribus illo ducimus, veritatis saepe fugiat dolorem officia nihil nam blanditiis ipsum numquam ex tenetur. Repellendus amet qui nihil fugiat voluptatibus ratione, soluta eaque sapiente! Aspernatur quam ab aliquid minus veniam numquam quidem ducimus, sed fuga dolorum! Numquam nihil cum molestiae, voluptas illo enim maxime. Neque tempore eum fugiat nisi, mollitia temporibus dolorum nam a! Explicabo praesentium dolorum, commodi quis, ratione autem corporis quasi, qui veniam odio maxime nulla repellendus modi eum corrupti ea neque in. Corporis nam animi quaerat repellat facilis modi nostrum, molestiae obcaecati ipsam voluptatibus veritatis sequi temporibus ratione corrupti ipsa officia quo nihil consequatur amet. Optio ab, maiores doloribus distinctio voluptate eos architecto officia, delectus aut beatae nam odio, repudiandae maxime nesciunt! Velit assumenda earum, eligendi officia tempora enim fugit consequatur voluptatem quae accusamus nostrum sed! Ipsa enim iste eaque similique numquam, eius quod quaerat, quia labore minus dolore architecto tempore sed quidem cumque, ad est. Fuga et, atque veniam dolorem, beatae dignissimos neque earum odio voluptas iusto laborum sapiente quidem quaerat totam, ab. Earum quod illo, sint molestiae itaque, iste quibusdam odio quae, libero voluptate blanditiis cum incidunt mollitia tenetur praesentium. Aut quasi, maiores beatae eum sunt repudiandae necessitatibus. Porro soluta iure, dolorum repudiandae non tempora tenetur quod modi veritatis similique. Quas architecto aliquam, dicta sequi, quaerat sapiente officiis, nobis doloremque laudantium, eligendi autem?
</div>
<script>
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
window.onload = function(){
if (localStorage.getItem("hide")!==null && localStorage.getItem("noTranslate")!==null){
let test = localStorage.getItem("hide");
termsOfUse.style.display = test;
let test_2 = localStorage.getItem("noTranslate");
main.style.transform = test_2;
}
}
setTimeout(function (){
termsOfUse.style.transform = "translateY(0%)";
}, 0);
function appearance(){
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + blockHeinght + "px)";
localStorage.setItem("noTranslate","translateY(0)");
}
appearance();
function back(){
termsOfUse.style.transform = "translateY(-100%)";
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + "0" + "px)";
localStorage.setItem("hide","none");
}
iAgree.onclick = back;
</script>
</body>
</html>
Последний раз редактировалось Сергей Ракипов, 13.05.2020 в 10:07.
|
|
13.05.2020, 08:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сергей Ракипов,
у вас полноценный макет, поменяйте тег форматирования c js на html в строках 0 и 112
Последний раз редактировалось рони, 13.05.2020 в 09:24.
|
|
13.05.2020, 09:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
кнопка соглашения
Сергей Ракипов,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
.main{
max-width: 720px;
margin: 0px auto 0;
padding: 20px 0px 0px 0px;
transition: all .5s .5s;
}
.terms_of_use{
width: 100%;
height: auto;
background-color:#000;
color:#FBAC1C;
padding: 20px 20px 20px 20px;
transform: translateY(-100%);
transition: all .5s .5s;
position: fixed;
z-index: 2;
}
.i_agree{
width: 150px;
height: 50px;
text-align: center;
padding: 14px 0px 0px 0px;
margin: 20px 0px 0px 0px;
background-color: #fff;
border: 2px solid #FBAC1C;
cursor: pointer;
}
.i_agree:hover{
width: 150px;
height: 50px;
text-align: center;
padding: 14px 0px 0px 0px;
margin: 20px 0px 0px 0px;
background-color: #FBAC1C;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
}
.terms_of_use > a{
color: #fff;
}
body.down .terms_of_use{
transform: translateY(0%);
}
body.down .main{
transform: translateY(var(--height, 0px));
}
</style>
<body>
<div class="terms_of_use">
В наших Заявлении о конфиденциальности и Заявлении об использовании файлов cookie разъясняется, как мы собираем и обрабатываем ваши персональные данные и используем файлы cookie для предоставления вам наилучшего и более персонализированного опыта при использовании нашего сайта. Продолжение использования вами этого сайта без изменения настроек означает ваше согласие на использование нами файлов cookie. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, <a href="terms_of_use.html">прочитать</a> <div class="i_agree">Соглашаюсь</div>
</div>
<div class="main">
<h3>Это содержимое тега макета H3</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eveniet, obcaecati aut dignissimos unde porro reiciendis pariatur quibusdam officiis facere, inventore impedit fugiat voluptatum nisi. Rem dolorum sed dolorem, excepturi deserunt cum est, quas deleniti officia unde totam ipsa necessitatibus ullam ipsam! Commodi corporis hic consequatur quas? Voluptatem tempore, doloribus laborum ipsa eum molestiae iusto vel optio numquam sapiente est incidunt, beatae. Praesentium possimus expedita, deserunt illo natus impedit? Sequi odio aspernatur impedit, suscipit id exercitationem, eaque libero neque. Inventore velit facilis ducimus assumenda hic, sed tempora in cupiditate perspiciatis, eos omnis unde? Neque unde nemo quos dicta deserunt tempore qui libero ratione molestiae, impedit quae nostrum dolor praesentium ab ex ut velit nihil quod molestias minus veniam. Earum accusamus, pariatur quia incidunt, quasi nobis dicta quos alias cumque, labore veritatis! Nam illo assumenda eveniet nobis, repudiandae quas! Consequuntur, numquam nemo obcaecati natus distinctio odio doloribus atque error suscipit deleniti, dolore, ducimus perferendis vero provident quibusdam explicabo iusto mollitia delectus, incidunt labore. Beatae perferendis vero incidunt deleniti, veritatis quaerat esse reprehenderit dolores laudantium accusamus sunt harum assumenda natus, dicta quod. Dolore qui unde eum adipisci saepe possimus? Deserunt saepe quibusdam, nemo quo eos repudiandae possimus quidem ipsa aliquam. Cumque dicta voluptas, architecto voluptate repudiandae delectus explicabo odio. Quia aperiam repudiandae quidem quo tempora earum ipsa nihil harum soluta voluptatibus ratione minima, reprehenderit corrupti eum mollitia et, assumenda explicabo tempore! Tenetur explicabo, inventore beatae ipsam unde fugiat recusandae impedit, sint reprehenderit quisquam accusantium ipsum maxime, quaerat dolorem consequatur quam aliquid veritatis corporis harum ratione nesciunt. Provident voluptatibus voluptatem reiciendis, alias laborum eveniet rerum non vitae fugit est, architecto doloribus, quas maxime quibusdam harum voluptate! Amet quidem harum, odit eligendi provident unde rerum, nobis reiciendis optio quis, totam dolor minima architecto illo ea ad blanditiis ab, explicabo officia incidunt nesciunt tempora iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam reiciendis aut totam. Iste minima a, consectetur dolor voluptate minus dolore non perspiciatis ducimus ex eius, omnis tempore illo atque, blanditiis corrupti. Voluptatum atque impedit aliquam sint, magni a laborum, necessitatibus illum ipsum labore voluptatibus voluptas! Cupiditate, quos, aliquid velit voluptatum aperiam tenetur pariatur doloribus quia, maxime accusantium sapiente fuga fugit deserunt at quaerat natus, esse provident ex nisi. Aliquid officiis dolore quo adipisci maiores laborum esse neque veniam distinctio fugiat natus modi, eius mollitia hic, velit, cupiditate accusamus recusandae labore consectetur tempore sapiente consequuntur deserunt facilis. Veritatis aliquid, voluptates vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis perferendis ullam reprehenderit odio velit nulla asperiores quas labore ducimus, quia sint veniam laudantium, sed repellat earum. Illum, possimus soluta incidunt dolor, optio dolorem! Molestias veritatis tenetur in at, nemo deserunt, saepe modi totam blanditiis dicta architecto, hic officiis dignissimos. Porro laborum earum est magni quae. Suscipit aliquam tenetur, voluptatem, officiis, officia dicta aut fugit dolore, ducimus dignissimos molestias libero. Hic eum porro omnis voluptatum in voluptates voluptate iure fugiat quos asperiores ad sunt veniam molestias natus nisi aliquam odit delectus animi beatae, impedit sit dignissimos quaerat ipsum repellat accusamus. Vero, doloribus, ad! Dolorem a quod reprehenderit doloribus reiciendis eius sit commodi odit, sed, totam itaque cupiditate eaque placeat est. Ratione deserunt voluptates sit repudiandae reiciendis accusantium perferendis provident quas magni ipsa, sequi ducimus consequuntur, harum sed aliquid recusandae accusamus, odio qui incidunt. Doloribus consequatur fugiat praesentium magni fugit culpa autem et rerum earum. Repudiandae, alias. Laboriosam unde inventore ab atque vero alias debitis cupiditate suscipit est dicta libero, porro, quia doloremque e voluptatibus aut odio sunt a modi, consequatur. Dicta, esse, libero. Quia earum inventore optio quod ipsa facilis, ea at repellat nesciunt nihil tempore provident recusandae accusantium eveniet minima odio reiciendis alias beatae corporis harum, quis veritatis omnis magnam quidem! Nemo deserunt sint odio sequi facere, doloribus illo ducimus, veritatis saepe fugiat dolorem officia nihil nam blanditiis ipsum numquam ex tenetur. Repellendus amet qui nihil fugiat voluptatibus ratione, soluta eaque sapiente! Aspernatur quam ab aliquid minus veniam numquam quidem ducimus, sed fuga dolorum! Numquam nihil cum molestiae, voluptas illo enim maxime. Neque tempore eum fugiat nisi, mollitia temporibus dolorum nam a! Explicabo praesentium dolorum, commodi quis, ratione autem corporis quasi, qui veniam odio maxime nulla repellendus modi eum corrupti ea neque in. Corporis nam animi quaerat repellat facilis modi nostrum, molestiae obcaecati ipsam voluptatibus veritatis sequi temporibus ratione corrupti ipsa officia quo nihil consequatur amet. Optio ab, maiores doloribus distinctio voluptate eos architecto officia, delectus aut beatae nam odio, repudiandae maxime nesciunt! Velit assumenda earum, eligendi officia tempora enim fugit consequatur voluptatem quae accusamus nostrum sed! Ipsa enim iste eaque similique numquam, eius quod quaerat, quia labore minus dolore architecto tempore sed quidem cumque, ad est. Fuga et, atque veniam dolorem, beatae dignissimos neque earum odio voluptas iusto laborum sapiente quidem quaerat totam, ab. Earum quod illo, sint molestiae itaque, iste quibusdam odio quae, libero voluptate blanditiis cum incidunt mollitia tenetur praesentium. Aut quasi, maiores beatae eum sunt repudiandae necessitatibus. Porro soluta iure, dolorum repudiandae non tempora tenetur quod modi veritatis similique. Quas architecto aliquam, dicta sequi, quaerat sapiente officiis, nobis doloremque laudantium, eligendi autem?
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const key = "yes";
if (key in localStorage) return;
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
window.addEventListener("load", function() {
var height = termsOfUse.scrollHeight;
main.style.setProperty("--height", `${height}px`)
document.body.classList.add("down");
iAgree.addEventListener("click", function() {
document.body.classList.remove("down");
main.style.removeProperty("--height");
localStorage.setItem(key, "hide");
})
})
});
</script>
</body>
</html>
Последний раз редактировалось рони, 13.05.2020 в 10:23.
Причина: if перенесено выше
|
|
13.05.2020, 10:08
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Понял спасибо, прост опо привычки выбрал JS, поменял
|
|
13.05.2020, 10:11
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Сообщение от рони
|
<script>
document.addEventListener("DOMContentLoaded", function() {
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
const key = "yes";
window.addEventListener("load", function() {
if (key in localStorage) return;
var height = termsOfUse.scrollHeight;
main.style.setProperty("--height", `${height}px`);
document.body.classList.add("down");
iAgree.addEventListener("click", function() {
document.body.classList.remove("down");
main.style.removeProperty("--height");
localStorage.setItem(key, "hide");
})
})
});
</script>
</body>
</html>
[/html]
|
Вот эта запись мне больше нравится, и я ее вроде понимаю
А почему луче делать классы заменять а не просто строку вставлять в уже существующие |
|
13.05.2020, 10:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Сергей Ракипов
|
|
А почему луче делать классы
|
быстрее.
пост #23 код немного изменён, условие if перенесено выше. |
|
13.05.2020, 10:44
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Понял, спасибо
|
|
22.06.2020, 11:16
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Почему после того как я принял пользовательское соглашение, при следующей перезагрузки, я какое то мгновение вижу это самое пользовательское соглашение, по идее я его нажал и больше не должен видеть.
https://kotvdom.ru/testik/
Вот сам код, он работает, но перезагрузки я вижу что на какое то мгновение появляется блок с пользовательским соглашением.
// JavaScript Document
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
window.onload = function(){
if (localStorage.getItem("hide")!==null && localStorage.getItem("noTranslate")!==null){
let test = localStorage.getItem("hide");
termsOfUse.style.display = test;
let test_2 = localStorage.getItem("noTranslate");
main.style.transform = test_2;
}
}
setTimeout(function (){
termsOfUse.style.transform = "translateY(0%)";
}, 0);
let appearance = function(){
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + blockHeinght + "px)";
localStorage.setItem("noTranslate","translateY(0)");
}
appearance();
window.addEventListener("resize", appearance);
function back(){
termsOfUse.style.transform = "translateY(-120%)";
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + "0" + "px)";
localStorage.setItem("hide","none");
}
iAgree.onclick = back;
|
|
22.06.2020, 11:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Сергей Ракипов,
алгоритм -- блок скрыт всегда средствами css!!!
если !localStorage.getItem("hide") показываем блок(добавляем класс)!
по клику ставим localStorage.getItem("hide") и скрываем блок(убираем класс).
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.terms_of_use {
transform: translateY(-120%);
position: fixed;
height: 70px;
width: 100%;
background-color: hsla(40, 100%, 30%, 1);
}
</style>
<script>
window.onload = function(){
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
if (!localStorage.getItem("hide")){
termsOfUse.style.transform = "translateY(0%)";
iAgree.onclick = function() {
termsOfUse.style.transform = "";
localStorage.setItem("hide", "abrakadabra")
}
}
}
</script>
</head>
<body>
<div class="terms_of_use"><button class="i_agree">принять</button></div>
</body>
</html>
|
|
22.06.2020, 12:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от рони
|
|
показываем блок(добавляем класс)
|
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.terms_of_use {
transform: translateY(-120%);
position: fixed;
height: 70px;
width: 100%;
background-color: hsla(40, 100%, 30%, 1);
transition: .8s;
}
.terms_of_use.attention{
transform: translateY(0%);
transition-delay: 1s;
}
</style>
<script>
window.onload = function(){
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
if (!localStorage.getItem("hidehide")){
termsOfUse.classList.add("attention");
iAgree.onclick = function() {
termsOfUse.classList.remove("attention");
localStorage.setItem("hidehide", "abrakadabra")
}
}
}
</script>
</head>
<body>
<div class="terms_of_use"><button class="i_agree">принять</button></div>
</body>
</html>
|
|
|
|
