So zeigen Sie ein Popup an, nachdem Sie auf ein Bild geklickt haben

Question

Ich möchte ein einfaches Popup-Fenster anzeigen, wenn ich auf das Bild klicke, das ich auf meiner Webseite eingerichtet habe. Ich sehe das Popup beim Klicken auf das Bild nicht. Kann mir jemand helfen, dieses Problem zu lösen? Im Folgenden finden Sie den Code ein, dass ich jetzt haben:

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

Ansicht Popup wo Mausklick auf dem Bildschirm

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

Ihre html gerade ist schlecht umgesetzt:

Änderung dieser:

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

Um dies:

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

Das Bild befand sich innerhalb des Popups und die myFunction wurde aus dem Popup geklammert. Ich habe das Bild einfach außerhalb des Popup-Fensters platziert und dem Bild das Onlick-Ereignis zugewiesen.

alles andere funktioniert.

EDIT für Koordinaten des Popup

Ich habe Ihre CSS ein wenig für diese geändert:

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

in css i entfernt die Position des .popup und dem Boden: 125% Sache.

in Ihrem HTML i hinzugefügt und Ereignisse auf den Aufruf von 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> 

Und schließlich die Javascript, um das Pop-up auf Koordinaten des Klick-Ereignisses hinzuzufügen:

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

ich erstellt habe ein JSFiddle, das Ihnen helfen soll, das Popup ist mit einer Schaltfläche verknüpft, kann aber leicht in ein Bild geändert werden.

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

https://jsfiddle.net/ede46hcm/

Answer 4

versuchen Sie dieses

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>