Javascript 图像赢得'；t单击关闭-JS

我一直在努力创建一个只在手机屏幕上弹出的图像。起初，我是用一个CSS类来做这件事的。我能够在网站启动和关闭时加载图像并单击它。然而，我无法仅在手机屏幕上显示图像

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

这是我的

HTML：

为什么调整大小时图像会扭曲，为什么单击时图像不会关闭？

CSS:
#你的形象{
显示：无；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：50%；
身高：50%；
}
@介质（最大宽度：500px）{
#你的形象{
显示：块；
}
}
JS:
函数showPopup（）{
document.GetElementId（'yourimage'）.style.display='block'；
}
showPopup（）；//显示模态图像。
函数closePopUp（）{
document.GetElementId（'yourimage'）.style.display='none'；
}
document.GetElementId（'yourimage'）。addEventListener（'click'，closePopUp）；//隐藏模态图像

我感谢任何人花时间帮助我，并期待任何回复：）

• J

---

使用

getElementById

而不是

GetElementId

：

函数showPopup（）{
document.getElementById（'yourimage'）.style.display='block'；
}
showPopup（）；//显示模态图像。
函数closePopUp（）{
document.getElementById（'yourimage'）.style.display='none'；
}
document.getElementById（'yourimage'）。addEventListener（'click'，closePopUp）；//隐藏模式图像

#你的形象{
显示：无；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：50%；
身高：50%；
}
@介质（最大宽度：500px）{
#你的形象{
显示：块；
}
}

为什么调整大小时图像会扭曲，为什么单击时图像不会关闭？

谢谢！不好意思，我没意识到。出于某种原因，即使CSS告诉它只在特定的屏幕尺寸上加载，图像也会加载。你知道为什么吗？@JosephPandolfi没问题；）你能验证我的答案吗？明白了！对不起，我是新来的。我不知道为什么当我只想在手机屏幕上加载图像时，图像会加载到所有的屏幕尺寸上。有没有办法使图像与加载到的屏幕相匹配？@JosephPandolfi没问题；）我有答案，但请打开一个新的问题，并给我一条线，这样我可以回答它，我已经上传了一个新的问题！我期待您的回复：）

    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