<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

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

Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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