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

Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы. При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно). Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляют при нажатии на кнопку или ссылку. Рассмотрим пример.

Исходный HTML файл и стили

<body>
  <button onclick="openModal();">Открыть</button>
  <div class="modal">
    <div class="modal-content">
      <p>Здесь может быть ваша реклама...</p>
      <span onclick="closeModal();">&times</span>
    </div>
  </div>
</body>
/* формируем фон для модального окна */
.modal {
  display: none; /* скрыт по умолчанию */
  /* темный фон при открытии модалки должен быть на всю страницу */
  position: fixed; 
  z-index: 1; /* поверх всех элементов */
  left: 0;
  top: 0;
  width: 100vw; /* полная ширина */
  height: 100vh; /* полная высота */
  background-color: rgba(0,0,0,0.4); /* цвет фона - прозрачный черный */
}

/* само модальное окно с контентом */
.modal-content {
  background-color: #fff;
  /* окно будет находится по центру по горизонтали и с отступом сверху в 100 px */
  margin: 100px auto; 
  padding: 20px;
  width: 50%; 
  font-size: 20px;
  /* разнесем текст и кнопоку по краям окна */
  display: flex;
  justify-content: space-between;
 }

span {
  cursor: pointer;
}

Логика работы проста, нам нужно что бы при нажатии на кнопку "открыть" на странице, менялось свойство display у класса modal с none на block, и обратно, при нажатии на кнопку закрыть в самом окне. Данный код необходимо добавить в раздел <sсript> на странице

const modal = document.getElementsByClassName("modal")[0];
const openModal = () => {
  modal.stylе.displаy = "block";
}
const closeModal = () => {
  modal.stylе.displаy = "none";
}
0 0
Основы Frontend за 14 дней
  • 72 урока в онлайн-тренажере
  • 4 живых вебинара и масскодинг
  • Помощь наставника на весь период обучения

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию на Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки