<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Модальное окно на JS

Модальное окно на JS

На этом уроке мы сделаем модальное окно на JS. Уже трудно себе представить современный коммерческий сайт без модального окна. Поэтому, понимание алгоритма реализации модального окна, обязательное условие для выхода на фриланс.

Алгоритм работы модального окна на JS

Изначально модальное окно скрыто от пользователя и появится, только после клика по кнопке. Для его закрытия, нужно кликнуть по крестику. Только-что, мы описали в общих чертах, как наш алгоритм должен выглядеть для пользователя. Но для программирования этого недостаточно. Нужна конкретика и подробности.

Модальное окно на JS.

Какие элементы на странице будут участвовать в процессе? Тут уже выше прозвучали:

  • кнопка
  • само модальное окно
  • крестик

Демонстрация модального окна

Прокрутим в голове все, что мы будем делать, от начала до конца.

  1. Сделаем HTML разметку
  2. Напишем CSS стили
  3. Получим все три элемента и положим их в переменные
  4. Повесим на кнопку обработчик события клика и callback функцию
  5. Функция сделает модальное окно видимым и добавит к нему класс с анимацией
  6. Повесим на крестик обработчик события клика и callback функцию
  7. Функция сделает модальное окно снова невидимым и удалит класс с анимацией

Как сделать модальное окно


<!-- кнопка-->
<button class="more">Отправить заявку</button>

<!--модальное окно-->
<div class="modal">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Заголовок модального окна</h2>
    </div>
    <div class="modal-body">
      <p>Здесь может быть форма</p>
      <p>...</p>
    </div>
    <div class="modal-footer">
      <h3>Подвал модального окна</h3>
    </div>
</div>

<!--CSS стили-->
.more {
    width: 180px;
    height: 60px;
    background-color: #c6cfff;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: bold;
    border: #c6cfff;
    cursor: pointer;
    position: absolute;
    left: 100px;
    top: 20px;
}

.modal {
    position: absolute;
    left: 100px;
    top: 200px;
    background-color: #f3f8ff;
    padding: 0;
    border: 5px solid #c6cfff;
    width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    display: none;
}

.modal-animation {     animation-name: animatetop;
    animation-duration: 0.8s
}

@keyframes animatetop {
    from {top: 0px; opacity:0}
    to {top: 200px; opacity:1}
}

Открыть модальное окно

Объявим переменные с такими же названиями, как и у классов. Получим нужные элементы по селектору. Данный способ получения нам хорошо подходит, поскольку все эти элементы уникальные. Присвоим переменным элементы (тип данных object).

let more = document.querySelector('.more');
    modal = document.querySelector('.modal');
    close = document.querySelector('.close');

Этот код открывает модальное окно, при клике по кнопке. Обработчик события отслеживает клик по кнопке и после клика запустится callback функция. Функция меняет в стилях значение none у свойства display, но значение block (показать). Чтобы окно появлялось плавно, функция добавляет к модальному окну класс с анимацией.

more.addEventListener('click', function() {
    modal.style.display = 'block';
    modal.classList.add('modal-animation');
});

Закрыть модальное окно

Для закрытия модального окна, навешиваем на крестик обработчик события клик и callback функцию. Набор действий у этой функции, будет прямо противоположный - меняем значение block на none и удаляем анимацию с модального окна.

close.addEventListener('click', function() {
    modal.style.display = 'none';
    modal.classList.remove('modal-animation');
});

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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