Создание всплывающей формы с анимацией

Опубликовано автором

Друзья, приветствую всех!
И желаю доброго времени суток!

Сегодня научился делать всплывающее окно с анимацией и спешу
поделится с вами. Вот ссылка прямо на сайт , где просто стоит кнопка и после нажатия
всплывает с анимацией форма обратной связи. https://isvinzov.ru/forma-popup23/#
Форма нормально отправляет данные на почту и после выходит письмо с благодарностью.
______________________________________

И так вначале нам нужен редактор кода, кому как удобнее.
У меня саблайм-текст.
Создаём каркас html страницы и пишем в ней код всплывающей формы
можно взять уже готовый , кому как удобнее.
Я взял готовый , вот его вид

<a href=»#popup» class=»green»>Показать окно</a>

<div id=»popup» class=»popup»>
<a href=»#» class=»popup-area»></a>
<div class=»popup-body»>
<div class=»popup-content»>
<a href=»#» class=»close»>x</a>
<div class=»popup-title» style=»text-align: center; font-weight: 900;»>Заполните поля формы и отправьте ваше сообщение</div>
<p style=»text-align: center; font-size: 12px;»>Мы свяжемся с вам в ближайщее время</p>
<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}

</style>
<form action=»/» method=»post»>
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type=»text» placeholder=»Имя» required></input></label><br>
<label> Ваш email: <input type=»email» placeholder=»Email» required></input></label><br>
<label>Текст сообщения:</label><br>
<label><textarea placeholder=»Введите ваше сообщение»></textarea><label>
<label><button formnovalidate type=»submit» class=»green»>Отправить</button> <button type=»reset»>Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type=»file» value=»Выберите файл»><label>
</fieldset>
</form>
</div>
</div>
</div>
______________________________________________________________

Сверху прописан код кнопки ссылкой.
В начале окну прописываем невидимость с помощью css
opacity: 0;
visibility: hidden;
transition: all 0.8s ease 0s;
попутно прописали анимацию транзишен.
Затем с помощью свойства таргет прописываем видимость
при клике на кнопку сверху.
.popup:target{
opacity: 1;
visibility: visible;

А также для анимации при клике обращаемся к контенту
и возвращаем всё назад
.popup:target .popup-content{
transform: translate(0px, 0px);
opacity: 1;
}

В итоге получаем плавное появление формы,
что можно проверить на сайте
https://isvinzov.ru/forma-popup23/#
______________________________________________________________

Желаю всем удачи и отличной вёрстки,
а также отличного настроения от проделанной работы.
Все материалы можете скачать по ссылке ниже

https://disk.yandex.ru/d/Y0-WWVTDkgChHA