Как создать модальное окно на веб-странице с использованием JavaScript и CSS?

Для создания модального окна на веб-странице с использованием JavaScript и CSS, вам нужно выполнить несколько действий. Ниже приведен подробный ответ с примерами кода.

Сначала вам понадобятся HTML-элементы, которые будут содержать ваше модальное окно и кнопки открытия/закрытия. Вот пример кода для ваших HTML-элементов:

<button class="open-modal-btn">Открыть модальное окно</button>

<div class="modal">
  <div class="modal-content">
    <span class="close-modal-btn">×</span>
    <h2>Модальное окно</h2>
    <p>Здесь может быть текст вашего модального окна.</p>
    <img src="путь_к_изображению" alt="изображение">
  </div>
</div>

В коде выше мы создали кнопку с классом "open-modal-btn" для открытия модального окна. Затем мы создали контейнер для модального окна с классом "modal". Внутри контейнера у нас есть заголовок, текст и изображение с помощью тегов <h2>, <p> и <img> соответственно. Также мы добавили кнопку закрытия с классом "close-modal-btn".

Теперь, когда у нас есть необходимые HTML-элементы, мы можем добавить JavaScript-код для функциональности модального окна. Вот исправленный код, который вы можете использовать:

const modal = document.querySelector('.modal');
const openModalBtn = document.querySelector('.open-modal-btn');
const closeModalBtn = document.querySelector('.close-modal-btn');

openModalBtn.addEventListener('click', function() {
  modal.style.display = 'block';
});

closeModalBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});

В этом коде мы получаем элементы модального окна, кнопку открытия и кнопку закрытия с помощью метода querySelector. Затем мы добавляем обработчики событий для клика на кнопки. При клике на кнопку открытия, устанавливаем свойство display модального окна в значение "block", чтобы показать его. При клике на кнопку закрытия, устанавливаем свойство display модального окна в значение "none", чтобы скрыть его.

Теперь ваше модальное окно должно работать должным образом.

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

Для создания модального окна на веб-странице с использованием JavaScript и CSS, вам потребуется внести некоторые изменения в ваш текущий код.

Первым делом, убедитесь, что у вас есть элемент на странице с классом "modal", который будет представлять само модальное окно. Убедитесь, что у этого элемента задано начальное значение свойства "display: none" в CSS, чтобы модальное окно изначально было скрыто.

Ваш текущий код по событиям click правильный, но вам нужно добавить код, который будет отображать текст и изображение внутри модального окна. Вы можете сделать это, например, создав дополнительные элементы внутри модального окна и заполнив их необходимой информацией.

Вот пример измененного кода, который поможет вам достичь желаемого результата:

const modal = document.querySelector('.modal');
const openModalBtn = document.querySelector('.open-modal-btn');
const closeModalBtn = document.querySelector('.close-modal-btn');
const modalText = document.querySelector('.modal-text');
const modalImage = document.querySelector('.modal-image');

openModalBtn.addEventListener('click', function() {
  modal.style.display = 'block';
  modalText.textContent = 'Ваш текст здесь';
  modalImage.src = 'путь_к_изображению';
});

closeModalBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});

В примере выше, я добавил две переменные - modalText и modalImage, которые представляют элементы внутри модального окна, которые должны содержать текст и изображение соответственно. Затем, при каждом клике на кнопку открытия модального окна, мы изменяем свойство "display" модального окна на "block", а также устанавливаем новый текст и путь к изображению для соответствующих элементов.

Убедитесь, что в вашем HTML коде у элементов модального окна и кнопок открытия/закрытия есть соответствующие классы, чтобы ваш JavaScript код мог правильно обращаться к ним.

Надеюсь, этот код поможет вам исправить проблему и создать модальное окно на веб-странице!