Изображение не закроется при клике - JS - PullRequest
Новая
       60

Изображение не закроется при клике - JS

1 голос
/ 29 апреля 2020

Я работал над созданием изображения, которое появляется только на экранах мобильных устройств. Сначала я делал это с классом CSS. Я смог загрузить изображение при запуске сайта и закрыть его, нажав на него. Однако я не смог заставить изображение отображаться только на экранах мобильных устройств.

У меня возникла проблема, связанная с использованием идентификатора HTML для загрузки изображения только на мобильных экранах. Однако я не могу закрыть изображение при нажатии. Я думаю, что ошибка в моем JS коде, но я не уверен.

Вот моя скрипка 

    HTML:
            <img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
            <p>
            Why does the image warp when resizing and why doesn't it close on click?
            </p>


    CSS:
    #yourimage {
      display: none;
        position: absolute;
      top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      width: 50%;
      height: 50%;
    }

    @media (max-width: 500px) {
      #yourimage {
        display: block;
      }
    }

JS:

function showPopup() {
  document.GetElementId('yourimage').style.display = 'block';
}
showPopup(); // show modal image. 

function closePopUp() {
  document.GetElementId('yourimage').style.display = 'none';
}

document.GetElementId('yourimage').addEventListener('click', closePopUp); // hide modal image

Я ценю всех, кто нашел время, чтобы помочь я и с нетерпением жду любых ответов:)

  • J

1 Ответ

2 голосов
/ 30 апреля 2020

Используйте getElementById вместо GetElementId: 

function showPopup() {
  document.getElementById('yourimage').style.display = 'block';
}
showPopup(); // show modal image. 

function closePopUp() {
  document.getElementById('yourimage').style.display = 'none';
}

document.getElementById('yourimage').addEventListener('click', closePopUp); // hide modal image
#yourimage {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

@media (max-width: 500px) {
  #yourimage {
    display: block;
  }
}
<img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">

<p>
  Why does the image warp when resizing and why doesn't it close on click?
</p>
...