[英]Image won't close on click - JS
I have been working on creating an image that pops up only on mobile screens.我一直致力于创建仅在移动屏幕上弹出的图像。 At first, I was doing this with a CSS class.
起初,我是用 CSS class 来做这个的。 I was able to make an image load on the website launch and close while clicking it.
我能够在网站启动时加载图像并在单击时关闭它。 However, I wasn't able to make the image show on mobile screens only.
但是,我无法使图像仅在移动屏幕上显示。
I now have the issue where I am using an HTML id to make the image load on only mobile screens.我现在有一个问题,我使用 HTML id 使图像仅在移动屏幕上加载。 However, I can't make the image close upon click.
但是,我无法在单击时关闭图像。 I think the error is in my JS code but I am not sure.
我认为错误出在我的 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
I appreciate anyone taking the time to help me and look forward to any responses:)我感谢任何花时间帮助我的人,并期待任何回应:)
Use getElementById
instead of GetElementId
:使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.