Кнопка пользовательского соглашение
Как создать кнопку пользовательского соглашение. Ну что бы она работала логично, пока не нажата, она вылезла, а если нажал то больше не беспокоила, и все это при учете повторного захода на сайт спустя время.
|
Сергей Ракипов,
раздел Сайт Javascript.ru не самый подходящий для ваших вопросов, создавайте темы здесь Общие вопросы Javascript сохраните эту ссылку. а по теме, создайте переменную в localStorage -- переменной нет показываем кнопку(добавляем класс кнопке изначально скрытой) и всё. пример для медитации, на основе которого можно сделать https://javascript.ru/forum/524100-post4.html |
Цитата:
|
Сергей Ракипов,
<button class="contract" hidden="hidden" onclick="localStorage.contract = this.hidden = true">contract</button>
<script>
document.querySelector('.contract').hidden = 'contract' in localStorage;
</script>
|
Цитата:
У меня сейчас другая проблема, не могу сообразить как сделать что бы блок который будет появляться вверху браузера сдвигал то что ниже, и соответственно когда он будет снова заезжать на вверх то что внизу он тоже подвиглась вверх. То есть у меня блок соглашение появляется через 2 секунды выезжаю сверху. И не подходит display none так как она не анимируется. и transform transform: translateY(100%); тоже не подходит так как он не сдвигает блоки. Нужно что бы один блок толкнул другой сверху вниз и когда он снова будет заезжать на вверх за ним подтянулись другие. |
|
рони,
Я не правильно видимо объяснил что я делаю, мне не модальное окно нужно а вот https://skr.sh/s28c7tAI5I0 один блок сдвигает другой |
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
const test = 50;
setTimeout(function (){
termsOfUse.style.transform = "translateY(0%)";
termsOfUse.style.position = "fixed";
termsOfUse.style.top = "0" + "px";
}, 10);
function appearance(){
let blockHeinght = termsOfUse.getBoundingClientRect().height;
let blockMargin = main.style.marginTop = blockHeinght + test + "px";
console.log(termsOfUse.getBoundingClientRect().height);
}
appearance();
function back(){
termsOfUse.style.transform = "translateY(-100%)";
termsOfUse.style.position = "";
termsOfUse.style.top = "0" + "px";
let blockHeinght = termsOfUse.getBoundingClientRect().height;
let blockMargin = main.style.marginTop = "0" + "px";
console.log(termsOfUse.getBoundingClientRect().height);
}
iAgree.onclick = back;
Вот что то похоже получается, но чувство что код какой то корявый |
а как правильно записать вот это
let blockMargin = main.style.transform = "translateY(blockHeinght)"; |
Сергей Ракипов,
без let blockMargin =
main.style.transform = `translateY(${blockHeinght})`;
//или так
main.style.transform = 'translateY(' + blockHeinght+')';
|
Цитата:
main.style.transform = 'translateY(' + blockHeinght+')'; но что то перестало работать и почему после второго + нет обозначение что пикселей или не нужно |
Сергей Ракипов,
blockHeinght если это число то добавьте px +'px)'; |
рони,
Да я уже сам попробовал методом тыка, сработало, просто пока синтаксис плохо знаю и делаю все как написано было. Спасибо |
Ну вот вроде получилось
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
const test = 50;
setTimeout(function (){
termsOfUse.style.transform = "translateY(0%)";
termsOfUse.style.position = "fixed";
termsOfUse.style.top = "0" + "px";
}, 10);
function appearance(){
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + blockHeinght + "px)";
console.log(termsOfUse.getBoundingClientRect().height);
}
appearance();
function back(){
termsOfUse.style.transform = "translateY(-100%)";
termsOfUse.style.position = "";
termsOfUse.style.top = "0" + "px";
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + "0" + "px)";
console.log(termsOfUse.getBoundingClientRect().height);
}
iAgree.onclick = back;
Скажите это нормальный код или инвалид на костылях |
Сергей Ракипов,
лучше макет, а не часть кода. например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Сергей Ракипов,
если можно то лучше менять class элементов, а не style |
Цитата:
Но у меня вот в чем вопрос Теоретическую часть localStorage я понял но на практике не могу реализовать
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){
let hideBlock = localStorage.getItem("hide");
main.style.transform = translate;
}
setTimeout(function (){
termsOfUse.style.transform = "translateY(0%)";
}, 0);
function appearance(){
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + blockHeinght + "px)";
}
appearance();
function back(){
termsOfUse.style.transform = "translateY(-100%)";
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + "0" + "px)";
localStorage.setItem("hide", "translate");
}
iAgree.onclick = back;
}
То есть я тут даже не понял что мне нужно в куки записать И сразу на понимаю я извлекаю из куки функию, скрипт или стили? И если нужно несколько стилей, например цвет и размер шрифта как сделать, тут всего один это положение. |
Цитата:
|
рони,
Вопрос один как в это скрипте сделать localStorage
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
const main = document.querySelector(".main");
const test = 50;
setTimeout(function (){
termsOfUse.style.transform = "translateY(0%)";
termsOfUse.style.position = "fixed";
termsOfUse.style.top = "0" + "px";
}, 10);
function appearance(){
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + blockHeinght + "px)";
console.log(termsOfUse.getBoundingClientRect().height);
}
appearance();
function back(){
termsOfUse.style.transform = "translateY(-100%)";
termsOfUse.style.position = "";
termsOfUse.style.top = "0" + "px";
let blockHeinght = termsOfUse.getBoundingClientRect().height;
main.style.transform = "translateY(" + "0" + "px)";
console.log(termsOfUse.getBoundingClientRect().height);
}
iAgree.onclick = back;
я запутался и не получается. |
Сергей Ракипов,
не могу помочь, подождите кого-то с продвинутой телепатией. |
рони,
Вот что мне нужно было, не знал как правильно сказать, посмотрите может что то коряво написано.
<!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>
|
Сергей Ракипов,
у вас полноценный макет, поменяйте тег форматирования c js на html в строках 0 и 112 |
кнопка соглашения
Сергей Ракипов,
<!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>
|
рони,
Понял спасибо, прост опо привычки выбрал JS, поменял |
Цитата:
А почему луче делать классы заменять а не просто строку вставлять в уже существующие |
Цитата:
пост #23 код немного изменён, условие if перенесено выше. |
рони,
Понял, спасибо |
Почему после того как я принял пользовательское соглашение, при следующей перезагрузки, я какое то мгновение вижу это самое пользовательское соглашение, по идее я его нажал и больше не должен видеть.
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;
|
Сергей Ракипов,
алгоритм -- блок скрыт всегда средствами 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>
|
Цитата:
<!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>
|
рони,
Логику понял, то есть мгновенного отрабатывание функции еще до загрузки страницы такого нет в js Просто прежде чем написать думал о том что изначально скрыть и показать если не было принято соглашение, но потом подумал что JS может справится |
Цитата:
|
Цитата:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.terms_of_use {
transform: translateY(0);
position: fixed;
height: 70px;
width: 100%;
background-color: hsla(40, 100%, 30%, 1);
transition: .8s;
}
.terms_of_use.yes{
transform: translateY(-120%);
}
body.hide .terms_of_use{
display: none;
}
</style>
<script>
window.onload = function(){
const termsOfUse = document.querySelector(".terms_of_use");
const iAgree = document.querySelector(".i_agree");
if (!localStorage.getItem("hiden")){
iAgree.onclick = function() {
termsOfUse.classList.add("yes");
localStorage.setItem("hiden", "abrakadabra")
}
}
}
</script>
</head>
<body>
<script>
if (localStorage.getItem("hiden")) document.body.classList.add("hide");
</script>
<div class="terms_of_use"><button class="i_agree">принять</button></div>
</body>
</html>
|
рони,
а что такое abrakadabra я понимаю что это какое то имя но за что оно отвечает, |
Сергей Ракипов,
тут может быть любое значение(строка) которое в if вернёт true. метка, что согласие получено.
alert(Boolean("abrakadabra"));
|
Цитата:
|
кто такой localStorage
https://developer.mozilla.org/ru/doc...w/localStorage как записать в storage https://developer.mozilla.org/ru/doc...torage/setItem как взять из storage https://developer.mozilla.org/ru/doc...torage/getItem и того:
// если нет в хранилище записи с ключем hiden
if (!localStorage.getItem("hiden")){
// слушатель на кнопку
iAgree.onclick = function() {
termsOfUse.classList.add("yes");
// запишем в хранилище запись с ключем hiden
localStorage.setItem("hiden", "abrakadabra")
}
}
// если в хранилище нет записи hiden, да даже если она есть и оно НЕ!! пустое (""), потому оно и abrakadabra, чтобы не было пустым
// выставим класс
if (localStorage.getItem("hiden")) document.body.classList.add("hide");
|
Наверное все-таки sessionStorage.
|
SuperZen,
Нравится таки объяснения, спасибо |
| Часовой пояс GMT +3, время: 20:07. |