图片点击后无法关闭--JS

Question

我一直在努力创建一个只在手机屏幕上弹出的图片。一开始，我是用一个CSS类来做的。我能够使图像加载在网站上启动，并在点击它时关闭。然而，我无法使图像只在移动屏幕上显示。

我现在的问题是，我使用一个HTML id来使图像只在移动屏幕上加载。但是，我无法使图片在点击后关闭。我认为错误在我的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

Answer 1

使用 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>