Создание модального окна: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в создании модальных окон с использованием JavaScript и HTML. Модальные окна — это всплывающие окна, которые блокируют взаимодействие с основным содержимым страницы, пока пользователь не закроет модальное окно. Они часто используются для отображения важной информации, форм или предупреждений. Вам предстоит пройти через ряд заданий, от простого открытия и закрытия модального окна до добавления динамического контента и обработки событий внутри него. Каждое задание включает в себя готовый HTML-код и частично написанный JavaScript-код. Ваша задача — заполнить пропуски в JavaScript-коде, чтобы модальное окно работало корректно.

Список тем

Простое модальное окно

Создайте простейшее модальное окно, которое будет открываться при нажатии на кнопку "Открыть модальное окно" и закрываться при нажатии на кнопку "Закрыть" внутри модального окна. Используйте классы для управления видимостью модального окна.

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } .show { display: block; }

HTML

Восстановить HTML

                      <button id="openModalBtn">Открыть модальное окно</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn">×</span>
    <p>Это простое модальное окно.</p>
  </div>
</div>

<button id="openModalBtn">Открыть модальное окно</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn">×</span>
    <p>Это простое модальное окно.</p>
  </div>
</div>

JavaScript

const openModalBtn = document.getElementById("openModalBtn");
const closeModalBtn = document.input__1("closeModalBtn");
const modal = document.getElementById(input__2);

openModalBtn.addEventListener("click", () => {
  modal.classList.add(input__3);
});

closeModalBtn.addEventListener(input__4, () => {
  modal.classList.input__5("show");
});

                     const openModalBtn = document.getElementById("openModalBtn");
const closeModalBtn = document.input__1("closeModalBtn");
const modal = document.getElementById(input__2);

openModalBtn.addEventListener("click", () => {
  modal.classList.add(input__3);
});

closeModalBtn.addEventListener(input__4, () => {
  modal.classList.input__5("show");
});

Используйте `getElementById` для получения элементов по ID. Добавьте обработчики событий `click` для кнопок. Используйте свойство `classList` и методы `add` и `remove` для управления классами, которые отвечают за отображение и скрытие модального окна.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Закрытие модального окна по клику вне его

Добавьте функциональность закрытия модального окна при клике по области вне модального окна (по фону).

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } .show { display: block; }

HTML

Восстановить HTML

                      <button id="openModalBtn2">Открыть модальное окно</button>

<div id="myModal2" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn2">×</span>
    <p>Это модальное окно закрывается по клику вне его.</p>
  </div>
</div>

<button id="openModalBtn2">Открыть модальное окно</button>

<div id="myModal2" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn2">×</span>
    <p>Это модальное окно закрывается по клику вне его.</p>
  </div>
</div>

JavaScript

const openModalBtn2 = document.getElementById("openModalBtn2");
const closeModalBtn2 = document.getElementById("closeModalBtn2");
const modal2 = document.getElementById("myModal2");

openModalBtn2.addEventListener("click", () => {
  modal2.classList.add("show");
});

closeModalBtn2.addEventListener("click", () => {
  modal2.classList.remove("show");
});

modal2.addEventListener("click", (event) => {
  if (event.target input__1 modal2) {
    modal2.classList.input__2(input__3);
  }
});

                     const openModalBtn2 = document.getElementById("openModalBtn2");
const closeModalBtn2 = document.getElementById("closeModalBtn2");
const modal2 = document.getElementById("myModal2");

openModalBtn2.addEventListener("click", () => {
  modal2.classList.add("show");
});

closeModalBtn2.addEventListener("click", () => {
  modal2.classList.remove("show");
});

modal2.addEventListener("click", (event) => {
  if (event.target input__1 modal2) {
    modal2.classList.input__2(input__3);
  }
});

Добавьте обработчик события `click` для самого модального окна. Внутри обработчика проверяйте, был ли клик совершен по самому модальному окну или по его содержимому. Если клик был по модальному окну (а не по содержимому), то закрывайте его.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Модальное окно с изображением

Создайте модальное окно, которое отображает увеличенное изображение при клике на миниатюру.

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; max-width: 80%; max-height: 80%; } .show { display: block; } .modal-content img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

HTML

Восстановить HTML

                      <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Миниатюра" id="thumbnail" width="100" height="100">

<div id="imageModal" class="modal">
  <div class="modal-content">
    <span id="closeImageModal">×</span>
    <img id="modalImage" src="" alt="Увеличенное изображение">
  </div>
</div>

<img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Миниатюра" id="thumbnail" width="100" height="100">

<div id="imageModal" class="modal">
  <div class="modal-content">
    <span id="closeImageModal">×</span>
    <img id="modalImage" src="" alt="Увеличенное изображение">
  </div>
</div>

JavaScript

const thumbnail = document.getElementById("thumbnail");
const modalImage = document.getElementById(input__1);
const imageModal = document.getElementById("imageModal");
const closeImageModal = document.getElementById("closeImageModal");

thumbnail.addEventListener("click", () => {
  modalImage.src = input__2.src;
  imageModal.classList.add("show");
});

closeImageModal.addEventListener("click", () => {
  imageModal.classList.remove(input__3);
});

                     const thumbnail = document.getElementById("thumbnail");
const modalImage = document.getElementById(input__1);
const imageModal = document.getElementById("imageModal");
const closeImageModal = document.getElementById("closeImageModal");

thumbnail.addEventListener("click", () => {
  modalImage.src = input__2.src;
  imageModal.classList.add("show");
});

closeImageModal.addEventListener("click", () => {
  imageModal.classList.remove(input__3);
});

Используйте атрибут `src` для получения URL миниатюры и установки его в качестве `src` для увеличенного изображения в модальном окне.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Динамическое содержимое модального окна

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

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } .show { display: block; }

HTML

Восстановить HTML

                      <button data-content="Содержимое 1" class="contentBtn">Кнопка 1</button>
<button data-content="Содержимое 2" class="contentBtn">Кнопка 2</button>

<div id="contentModal" class="modal">
  <div class="modal-content">
    <span id="closeContentModal">×</span>
    <p id="modalContent"></p>
  </div>
</div>

<button data-content="Содержимое 1" class="contentBtn">Кнопка 1</button>
<button data-content="Содержимое 2" class="contentBtn">Кнопка 2</button>

<div id="contentModal" class="modal">
  <div class="modal-content">
    <span id="closeContentModal">×</span>
    <p id="modalContent"></p>
  </div>
</div>

JavaScript

const contentBtns = document.querySelectorAll(".contentBtn");
const modalContent = document.getElementById("modalContent");
const contentModal = document.getElementById("contentModal");
const closeContentModal = document.getElementById("closeContentModal");

contentBtns.forEach(button => {
  button.addEventListener("click", () => {
    modalContent.textContent = button.input__1(input__2);
    contentModal.classList.add("show");
  });
});

closeContentModal.addEventListener("click", () => {
  contentModal.classList.remove("show");
});

                     const contentBtns = document.querySelectorAll(".contentBtn");
const modalContent = document.getElementById("modalContent");
const contentModal = document.getElementById("contentModal");
const closeContentModal = document.getElementById("closeContentModal");

contentBtns.forEach(button => {
  button.addEventListener("click", () => {
    modalContent.textContent = button.input__1(input__2);
    contentModal.classList.add("show");
  });
});

closeContentModal.addEventListener("click", () => {
  contentModal.classList.remove("show");
});

Используйте `textContent` или `innerHTML` для изменения содержимого элемента `<p>` внутри модального окна.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Модальное окно с формой

Создайте модальное окно с формой. При отправке формы выводите введенные данные (вместо отправки на сервер).

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } .show { display: block; }

HTML

Восстановить HTML

                      <button id="openFormModalBtn">Открыть форму</button>

<div id="formModal" class="modal">
  <div class="modal-content">
    <span id="closeFormModalBtn">×</span>
    <form id="myForm">
      <label for="name">Имя:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br><br>
      <input type="submit" value="Отправить">
    </form>
    <div id="formData"></div>
  </div>
</div>

<button id="openFormModalBtn">Открыть форму</button>

<div id="formModal" class="modal">
  <div class="modal-content">
    <span id="closeFormModalBtn">×</span>
    <form id="myForm">
      <label for="name">Имя:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br><br>
      <input type="submit" value="Отправить">
    </form>
    <div id="formData"></div>
  </div>
</div>

JavaScript

const openFormModalBtn = document.getElementById("openFormModalBtn");
const formModal = document.getElementById("formModal");
const closeFormModalBtn = document.getElementById("closeFormModalBtn");
const myForm = document.getElementById("myForm");
const formData = document.getElementById("formData");

openFormModalBtn.addEventListener("click", () => {
  formModal.classList.add("show");
});

closeFormModalBtn.addEventListener("click", () => {
  formModal.classList.remove("show");
});

myForm.addEventListener(input__1, (event) => {
  event.input__2();

  const name = document.getElementById("name").value;
  const email = document.getElementById(input__3).input__4;

  formData.innerHTML = `<p>Имя: ${name}</p><p>Email: ${email}</p>`;

});

                     const openFormModalBtn = document.getElementById("openFormModalBtn");
const formModal = document.getElementById("formModal");
const closeFormModalBtn = document.getElementById("closeFormModalBtn");
const myForm = document.getElementById("myForm");
const formData = document.getElementById("formData");

openFormModalBtn.addEventListener("click", () => {
  formModal.classList.add("show");
});

closeFormModalBtn.addEventListener("click", () => {
  formModal.classList.remove("show");
});

myForm.addEventListener(input__1, (event) => {
  event.input__2();

  const name = document.getElementById("name").value;
  const email = document.getElementById(input__3).input__4;

  formData.innerHTML = `<p>Имя: ${name}</p><p>Email: ${email}</p>`;

});

Добавьте обработчик события `submit` для формы. Используйте `event.preventDefault()` чтобы предотвратить стандартное поведение формы (перезагрузку страницы). Получите значения полей ввода с помощью `value`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Закрытие модального окна по клавише Esc

Добавьте функциональность закрытия модального окна при нажатии клавиши Esc.

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } .show { display: block; }

HTML

Восстановить HTML

                      <button id="openModalBtn6">Открыть модальное окно</button>

<div id="myModal6" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn6">×</span>
    <p>Это модальное окно закрывается по клавише Esc.</p>
  </div>
</div>

<button id="openModalBtn6">Открыть модальное окно</button>

<div id="myModal6" class="modal">
  <div class="modal-content">
    <span id="closeModalBtn6">×</span>
    <p>Это модальное окно закрывается по клавише Esc.</p>
  </div>
</div>

JavaScript

const openModalBtn6 = document.getElementById("openModalBtn6");
const closeModalBtn6 = document.getElementById("closeModalBtn6");
const modal6 = document.getElementById("myModal6");

openModalBtn6.addEventListener("click", () => {
  modal6.classList.add("show");
});

closeModalBtn6.addEventListener("click", () => {
  modal6.classList.remove("show");
});

document.addEventListener(input__1, (event) => {
  if (event.key === input__2 || event.code === input__3) {
    if (modal6.classList.contains(input__4)) {
      modal6.classList.remove("show");
    }
  }
});

                     const openModalBtn6 = document.getElementById("openModalBtn6");
const closeModalBtn6 = document.getElementById("closeModalBtn6");
const modal6 = document.getElementById("myModal6");

openModalBtn6.addEventListener("click", () => {
  modal6.classList.add("show");
});

closeModalBtn6.addEventListener("click", () => {
  modal6.classList.remove("show");
});

document.addEventListener(input__1, (event) => {
  if (event.key === input__2 || event.code === input__3) {
    if (modal6.classList.contains(input__4)) {
      modal6.classList.remove("show");
    }
  }
});

Используйте событие `keydown` на объекте `document`. Проверяйте `event.key` или `event.code` для определения нажатой клавиши.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Доступность модального окна (aria-attributes)

Улучшите доступность модального окна с помощью ARIA-атрибутов.

CSS

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; } .show { display: block; }

HTML

Восстановить HTML

                      <button id="openModalBtn7" aria-label="Открыть модальное окно">Открыть модальное окно</button>

<div id="myModal7" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDescription">
  <div class="modal-content">
    <span id="closeModalBtn7" aria-label="Закрыть модальное окно">×</span>
    <h2 id="modalTitle">Заголовок модального окна</h2>
    <p id="modalDescription">Описание модального окна.</p>
  </div>
</div>

<button id="openModalBtn7" aria-label="Открыть модальное окно">Открыть модальное окно</button>

<div id="myModal7" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDescription">
  <div class="modal-content">
    <span id="closeModalBtn7" aria-label="Закрыть модальное окно">×</span>
    <h2 id="modalTitle">Заголовок модального окна</h2>
    <p id="modalDescription">Описание модального окна.</p>
  </div>
</div>

JavaScript

const openModalBtn7 = document.getElementById("openModalBtn7");
const closeModalBtn7 = document.getElementById("closeModalBtn7");
const modal7 = document.getElementById("myModal7");

openModalBtn7.addEventListener("click", () => {
  modal7.classList.add("show");
  input__1.focus();
});

closeModalBtn7.addEventListener("click", () => {
  modal7.classList.remove("show");
});

                     const openModalBtn7 = document.getElementById("openModalBtn7");
const closeModalBtn7 = document.getElementById("closeModalBtn7");
const modal7 = document.getElementById("myModal7");

openModalBtn7.addEventListener("click", () => {
  modal7.classList.add("show");
  input__1.focus();
});

closeModalBtn7.addEventListener("click", () => {
  modal7.classList.remove("show");
});

Используйте атрибуты `aria-modal`, `aria-labelledby`, `aria-describedby` и `role` для улучшения доступности.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку