0

У меня сайт как по блокам. header, основная часть, footer. Если я прописываю код для popup в нем то получается как на фото под цифрой 3. Если прописываю ниже основной части, то есть отдельно вообще, то получается как под цифрой 1. А нужно сделать так чтобы было под цифрой 2. То есть отдельно от Всего блока по центру. Мне надо сбоку сделать такую стрелочку, и когда я на нее нажимаю появляется окно. Это у меня получилось, но как сделать так чтобы эта кнопка была под цифрой 2. Если что под кнопкой я подразумеваю текст "Вызвать всплывающее окно" на фото

введите сюда описание изображения

2
  • Нужно абсолютно спозиционировать окно относительно body
    – kertAW
    Commented 20 нояб. 2020 в 21:41
  • Как это сделать?
    – Jenka
    Commented 21 нояб. 2020 в 10:07

1 ответ 1

1

Для демонстрации нажмите на кнопочку.

document.querySelector('button').addEventListener('click',e=>{
  e.target.classList.toggle('position-left');
});
body {
height: 200vh;
}

div {
width: 70vw;
height: 70vh;
background: #ccc;
margin-left: 15vw;
margin-top: 15vh;
}

button {
width: 25vw;
height: 30vh;
font-size: 20pt;
}

button.position-left {
position:fixed;
left: 0;
top:50vh;
transform: translate(0, -50%);
box-shadow: 0 0 3px #000;
}
<div>
  <button>Toggle me</button>
</div>

6
  • куда нужно добавить этот фрагмент кода "document.querySelector('button').addEventListener('click',e=>{ e.target.classList.toggle('position-left'); });" И даже так, тут на сайте я пробую запустить "выполнить код" по верх кнопки с фоном какая-то хрень, проверьте сами. В этом окне которое закрывает основную часть - ошибка
    – Jenka
    Commented 21 нояб. 2020 в 10:09
  • JS, приложенный к ответу, только подключает и отключает у кнопки класс из CSS .position-left. JS вам вообще не нужен. Нужно только содержание класса CSS.
    – DiD
    Commented 21 нояб. 2020 в 12:45
  • все равно не получается, вот страница с html, css и js jsfiddle.net/LolKekChebyrek/s8m4r162/… Поможешь?
    – Jenka
    Commented 21 нояб. 2020 в 14:12
  • @Jenka jsfiddle.net/5ktj6br4/1 так?
    – DiD
    Commented 21 нояб. 2020 в 14:53
  • да, спасибо большое, выручил очень
    – Jenka
    Commented 21 нояб. 2020 в 15:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.