<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать всплывающую форму

Как сделать всплывающую форму

Сегодня вы узнаете, как сделать всплывающую форму на 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.