Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2020, 08:18
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Кнопка пользовательского соглашение
Как создать кнопку пользовательского соглашение. Ну что бы она работала логично, пока не нажата, она вылезла, а если нажал то больше не беспокоила, и все это при учете повторного захода на сайт спустя время.
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2020, 09:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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

Сообщение от рони Посмотреть сообщение
Сергей Ракипов,
раздел Сайт Javascript.ru не самый подходящий для ваших вопросов, создавайте темы здесь Общие вопросы Javascript
сохраните эту ссылку.
а по теме, создайте переменную в localStorage -- переменной нет показываем кнопку(добавляем класс кнопке изначально скрытой) и всё.
пример для медитации, на основе которого можно сделать https://javascript.ru/forum/524100-post4.html
По вопросам, понял, за ссылку спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 12.05.2020, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сергей Ракипов,
<button class="contract" hidden="hidden" onclick="localStorage.contract = this.hidden = true">contract</button>
  <script>
document.querySelector('.contract').hidden = 'contract' in localStorage;
  </script>
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2020, 12:33
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Сообщение от рони Посмотреть сообщение
Сергей Ракипов,
<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%); тоже не подходит так как он не сдвигает блоки. Нужно что бы один блок толкнул другой сверху вниз и когда он снова будет заезжать на вверх за ним подтянулись другие.
Ответить с цитированием
  #6 (permalink)  
Старый 12.05.2020, 13:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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


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

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

https://www.cssscript.com/minimal-pu...-box-modalcss/
Ответить с цитированием
  #7 (permalink)  
Старый 12.05.2020, 14:21
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

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

а вот https://skr.sh/s28c7tAI5I0

один блок сдвигает другой
Ответить с цитированием
  #8 (permalink)  
Старый 12.05.2020, 14:39
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

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;


Вот что то похоже получается, но чувство что код какой то корявый

Последний раз редактировалось Сергей Ракипов, 12.05.2020 в 15:11.
Ответить с цитированием
  #9 (permalink)  
Старый 12.05.2020, 15:28
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

а как правильно записать вот это
let blockMargin = main.style.transform = "translateY(blockHeinght)";
Ответить с цитированием
  #10 (permalink)  
Старый 12.05.2020, 15:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сергей Ракипов,
без let blockMargin =
main.style.transform = `translateY(${blockHeinght})`;
//или так
main.style.transform = 'translateY(' + blockHeinght+')';
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вставлять переменную в span Hovik Общие вопросы Javascript 17 20.12.2018 08:30
узнать индекс кнопки из массива Hovik Общие вопросы Javascript 0 16.12.2018 02:20
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Не работает кнопка "Наверх" dle 9.3 dunek_ Opera, Safari и др. 1 25.05.2013 18:26
Кнопка с запросом Logo424 Javascript под браузер 12 20.05.2013 19:29