Создание формы для заказа на лендинге?

Question

[Санёчек]

Постигаю основы HTML и CSS. После чтение теории и выполнения задачек сверстал первый лендинг.
На макете была кнопка ЗАКАЗАТЬ. Могу сверстать форму с нужными полями для ввода. Как сделать так что бы форма открывалась не в новой странице, а что бы лендинг "затемнялся" и форма появлялась на первом плане?

Comments

[Владислав Лысков]

это называется модальное окно, далее гугль в помощь

Answer 1

[Александр]

дрынк
стилизовать сами сможете?

Comments

[Санёчек]

Спасибо! Покопаюсь и разберусь не знал просто что это называется "модальное окно"

Answer 2

[ArutaGerman]

Мой вариант - с помощью js вешаем событие на id элемента формы, а затемнение с помощью shadow-box делаю нужным цветом в css.

JS:
document.getElementById('about__subscribe').onclick = function viewdivMail(){
var el=document.getElementById('enter__form');
if(el.style.display=="flex"){
el.style.display="none";
} else {
el.style.display="flex";
}
};

about__subscribe - id кнопки, при нажатии на которой читается клик и открывается форма
enter__form - id формы, которая открывается при нажатии

Чтобы не было где-то там формы, а открывалась в нужном месте, ей нужно стили задать в css.