图片不会在点击时关闭 - JS

Question

我一直致力于创建仅在移动屏幕上弹出的图像。起初，我是用 CSS class 来做的。我能够在网站上加载图像并在单击时关闭。但是，我无法使图像仅在移动屏幕上显示。

我现在遇到问题，我使用 HTML id 使图像仅在移动屏幕上加载。但是，我无法在单击时关闭图像。我认为错误在我的 JS 代码中，但我不确定。

这是我的Fiddle

    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>

图片不会在点击时关闭 - JS

Image won't close on click - JS

html

javascript

css

mobile

jsfiddle