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

Question

我想在点击我在网页上放置的图片时显示一个简单的弹出窗口。单击图像时我看不到弹出窗口。任何人都可以帮我解决这个问题吗？以下是我现在的代码：

＆＃13;

＆＃13;

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

＆＃13;

.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 ;}
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的HTML实施得很糟糕：

改变这个：

<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>

对此：

<img src="Boma_1_2/F16_20170316141116392_0001.jpg" onclick="myFunction();" alt="Boma" style="width:1000px;height:600px;">       
<div class="popup"  style="width: 1000px; height: 600px;">
   <span class="popuptext" id="myPopup">Popup text...</span>
</div> 

图像在弹出窗口内，myFunction从弹出窗口中弹出。我只是将图像放在弹出窗口之外，并将onlick事件分配给图像。

其他一切都有效。

编辑弹出窗口的坐标

我已经改变了你的CSS：

.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;
    left: 50%;
    margin-left: -80px;
}
.popup {
    display: inline-block;
    cursor: pointer;
}

在css我删除了.popup的位置和底部：125％的东西。

在你的html中添加了myfunction并调用了事件：

<img src="Boma_1_2/F16_20170316141116392_0001.jpg" onclick="myFunction(event);" alt="Boma" style="width:1000px;height:600px;">       
<div class="popup"  style="width: 1000px; height: 600px;">
   <span class="popuptext" id="myPopup">Popup text...</span>
</div> 

最后在点击事件的坐标上添加弹出窗口的javascript：

function myFunction(event) {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
    popup.style.top = event.clientY-40 + "px";
    popup.style.left = event.clientX + "px";
}

Answer 2

我已经创建了一个可以帮助你的JSFiddle，弹出窗口链接到一个按钮，但可以轻松地更改为图像。

<button id="button"></button>

https://jsfiddle.net/ede46hcm/

Answer 3

尝试这个

function myFunction() {
      
       $("#myPopup").toggle("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()" alt="Boma" style="width:1000px;height:600px;">
             <span class="popuptext" id="myPopup">Popup text...</span>
        </div>

Answer 4

view popup where mouse click on screen

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>