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

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

您的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事件分配给了图像。

其他一切正常。

编辑弹出窗口的坐标

我为此做了一些改动：

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

最后是在click事件的坐标上添加弹出窗口的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

在鼠标单击屏幕上查看弹出窗口

 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>