Кнопка пользовательского соглашение

[Сергей Ракипов]

Как создать кнопку пользовательского соглашение. Ну что бы она работала логично, пока не нажата, она вылезла, а если нажал то больше не беспокоила, и все это при учете повторного захода на сайт спустя время.

[рони]

Сергей Ракипов,
раздел Сайт Javascript.ru не самый подходящий для ваших вопросов, создавайте темы здесь Общие вопросы Javascript
сохраните эту ссылку.
а по теме, создайте переменную в localStorage -- переменной нет показываем кнопку(добавляем класс кнопке изначально скрытой) и всё.
пример для медитации, на основе которого можно сделать https://javascript.ru/forum/524100-post4.html

[Сергей Ракипов]

Сергей Ракипов,
раздел Сайт 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>

[Сергей Ракипов]

<button class="contract" hidden="hidden" onclick="localStorage.contract = this.hidden = true">contract</button>
  <script>
document.querySelector('.contract').hidden = 'contract' in localStorage;
  </script>

Я уже разобрался как работает localStorage, спасибо

У меня сейчас другая проблема, не могу сообразить как сделать что бы блок который будет появляться вверху браузера сдвигал то что ниже, и соответственно когда он будет снова заезжать на вверх то что внизу он тоже подвиглась вверх.

То есть у меня блок соглашение появляется через 2 секунды выезжаю сверху.

И не подходит display none так как она не анимируется. и transform transform: translateY(100%); тоже не подходит так как он не сдвигает блоки. Нужно что бы один блок толкнул другой сверху вниз и когда он снова будет заезжать на вверх за ним подтянулись другие.

[рони]

Сергей Ракипов,


https://www.w3schools.com/howto/howto_css_modals.asp

https://freefrontend.com/css-modal-windows/

https://www.cssscript.com/minimal-pu...-box-modalcss/

[Сергей Ракипов]

рони,
Я не правильно видимо объяснил что я делаю, мне не модальное окно нужно

а вот 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+')';