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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

Исходный 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";
}

3 года назад

Вячеслав Межуревский

Менять в ключевых словах латинские буквы на русские,визуально не отличимые - свинство.

7 месяцев назад

1 месяц

Основы JavaScript

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

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

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

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

Похожие вопросы