單擊圖像後如何顯示彈出框

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; 
 
    } 
 
    \t \t 
 
    \t \t .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;"> 
 
    \t \t <img src="Boma_1_2/F16_20170316141116392_0001.jpg" alt="Boma" style="width:1000px;height:600px;"> 
 
    \t \t <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>

Answer 2

你的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彈出窗口添加到上的click事件的座標：

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 3

我創建一個可以幫助你的JSFiddle，彈出窗口鏈接到一個按鈕，但可以很容易地更改爲圖像。

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

https://jsfiddle.net/ede46hcm/

Answer 4

試試這個

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>