Как сделать всплывающую форму
Сегодня вы узнаете, как сделать всплывающую форму на CSS+JS, чтобы она появлялась и исчезала при клике на кнопку. По такому же принципу вместо всплывающей формы, можно сделать всплывающее окно с любым кодом, поскольку сначала мы прописываем тег div, который может служить контейнером и для любых других элементов, а не только формы.
Просто форма – наиболее часто используемый компонент для всплывающего окна в принципе. Я категорически против принудительных всплывающих окон, обычно их называют поп-апами. Это когда вы заходите на сайт и сразу же в центре экрана выскакивает форма подписки, которая блокирует все ваши действия. У вас есть только два варианта: заполнить и отправить форму или закрыть (не сразу ясно как это сделать).
Не знаю как у вас, но у меня такая навязчивость, вызывает протест, если не сказать хуже. В большинстве случаем, я просто закрываю сайт.
Не унижайте ваших посетителей, позвольте им самим решать, заполнять форму или нет.
Демонстрация всплывающей формы
HTML структура
Ниже код кнопки, кликнув по которой, откроется форма подписки, за это отвечает атрибут onclick и событие openForm.
<button class="open-button" onclick="openForm()">Подпишитесь</button>
Форма подписки form помещена внутри тега div, состоит из двух текстовых полей и двух кнопок. У тега div одновременно задан класс и id. Зачем? В классе form-popup мы задаем стили, а на #myForm вешаем JS события.
<div class="form-popup" id="myForm">
<form action="#" class="form-container">
<h1>Подписаться</h1>
<label for="name"><b>Имя</b></label>
<input type="text" placeholder="Ваше имя" name="name" required>
<label for="email"><b>Е-мейл</b></label>
<input type="text" placeholder="Ваш е-мейл" name="email" required>
<button type="submit" class="btn">Отправить</button>
<button type="button" class="btn cancel" onclick="closeForm()">Закрыть</button>
</form>
</div>
CSS код
Код ниже, фиксирует кнопку, открывающую форму в определенном месте – в правом и нижнем углу браузера.
.open-button {
position: fixed;
bottom: 22px;
right: 26px;
width: 290px;
..
}
По умолчанию, всплывающая форма спрятана.
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 14px;
}
Стили для контейнера формы, тот самый div, куда можно помещать любые веб-элементы.
.form-container {
max-width: 320px;
..
}
Оба текстовых поля должны по ширине занимать 100% относительно контейнера.
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
..
}
Когда поля формы в фокусе, то пусть меняют свой цвет. В фокусе – это значит в этот момент пользователь начинает взаимодействовать с формой.
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
..
}
Создаем общие стили для кнопок: Отправить / Закрыть.
.form-container .btn {
background-color: #1976D2;
..
opacity: 0.7;
}
Меняем цвет для кнопки Закрыть.
.form-container .cancel {
background-color: #448AFF;
}
Делаем для всех кнопок эффект при наведении – полная непрозрачность.
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
JS код
Функция openForm открывает форму. Мы получаем элемент с #myForm и делаем его видимым display = "block";
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
Функция closeForm закрывает форму, получает элемент с #myForm и скрывает его display = "none";
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
Оба значения display, скрипт берет их стилей, а события openForm / closeForm, прописаны в тегах button.
Данная статья, только отвечает на вопрос, как сделать всплывающую форму, без отправки данных на сервер.
На CodePen вы можете увидеть весь код всплывающей формы, который можно скачать и использовать в своих проекта.
See the Pen Popup form at JS by porsake (@porsake) on CodePen.
-
Создано 16.11.2018 10:47:46
-
Михаил Русаков
Комментарии (1):
Форма отправит данные в файл обработки. Как это будет выглядеть визуально? Что станет с вплывшим окном?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.