Появление блока по нажатию [закрыт]

136
26 августа 2021, 07:50
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Перейдя по ссылке - https://bpd4.backpackerdeals.com/deal можно увидеть Booking calendar, в котором по нажатию на день под ним появляется блок с position: relative. Как это можно осуществить? Именно что бы блок появлялся под днем на который кликнули. Календарь построен на Grid. Так же прикрепил скрин. [1]: https://i.stack.imgur.com/LD1tV.png

Answer 1

Чтобы понять как это реализовать вам нужно изучить в JavaScript событие onclick - https://learn.javascript.ru/introduction-browser-events (лучше прочитать всё полностью и выполнить задания).
А также как изменять документ - https://learn.javascript.ru/modifying-document, также это всё лучше прочитать и выполнить все задания.
После этого вы сможете добавить нужный блок в разметку HTML с помощью JavaScript, при клике по нужному элементу.
Вставил пример, как может выглядеть подобный код

var button = document.querySelector(".button"); 
button.addEventListener('click', () => { 
    let div = document.createElement('div'); 
    div.className = "copy"; 
    div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение."; 
    document.body.append(div); 
});
.button { 
    color: black; 
    width: 50%; 
    padding: 15px 0; 
    margin: 0 auto; 
    text-align: center; 
    cursor: pointer; 
    border: 2px solid black; 
    font-size: 24px; 
} 
 
.copy { 
    width: 80%; 
    margin: 5px auto 0; 
    border: 2px solid black; 
    padding: 5px 0; 
    text-align: center; 
    font-size: 20px; 
}
<div class="button">Нажми для блока</div>

READ ALSO
Как правильно оформлять HTML код?

Как правильно оформлять HTML код?

Недавно начал разбираться в html разметке, и возникло несколько вопросов, касающихся ее оформленияХотелось бы услышать мнение более опытных...

178
GUIStyle.Draw не реагирует на isActive == true

GUIStyle.Draw не реагирует на isActive == true

Вызванный GUIStyleDraw с параметрами style

111
Как в DllImport указать соглашение __vectorcall?

Как в DllImport указать соглашение __vectorcall?

Возможно ли вообще это, илиNET Framework с данным соглашением не умеет работать?

118
Переменная bool зависимая от значения float

Переменная bool зависимая от значения float

Нужно заиметь 2 переменные: флоат и бул

129