圖片不會在點擊時關閉 - JS

Question

我一直致力於創建僅在移動屏幕上彈出的圖像。 起初，我是用 CSS class 來做這個的。 我能夠在網站啟動時加載圖像並在單擊時關閉它。 但是，我無法使圖像僅在移動屏幕上顯示。

我現在有一個問題，我使用 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

我感謝任何花時間幫助我的人，並期待任何回應:)

• Ĵ

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>