javascript - 单击图像后如何显示弹出窗口

Question

我想在点击我放在网页上的图片时显示一个简单的弹出窗口。单击图像时我没有看到弹出窗口。谁能帮我解决这个问题？以下是我现在拥有的代码:

 function myFunction() {
        var popup = document.getElementById("myPopup");
        popup.classList.toggle("show");
    }

.popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    
    
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }
    
    
    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
    		
    		.popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }
    
    
    @-webkit-keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    
    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup" onclick="myFunction()" style="width: 1000px; height: 600px;">
    		 <img src="Boma_1_2/F16_20170316141116392_0001.jpg" alt="Boma" style="width:1000px;height:600px;">
    		 <span class="popuptext" id="myPopup">Popup text...</span>
      </div>

Answer 1

在鼠标点击屏幕时查看弹出窗口

function myFunction(e) {

  var x = e.pageX;
  var y = e.pageY;
  $("#myPopup").css({
    left: x
  });
  $("#myPopup").css({
    top: y
  });
  $("#myPopup").show();

}

.popuptext {
  display: none;
  color: white;
  position: absolute;
  top: 100px;
  left: 400px;
  padding: 50px;
  border: solid 1px #ddd;
  background: green;
  width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup" style="width: 1000px; height: 600px;">
  <img src="Boma_1_2/F16_20170316141116392_0001.jpg" onclick="myFunction(event)" alt="Boma" style="width:1000px;height:600px;">
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>