單擊圖像使對話框出現

Question

我需要在我們的網頁上點擊一個圖標，然後出現一個對話框以確認操作。隨着點擊是一些方法將開始工作，一些存儲過程將工作等等...

但可悲的是，我只有這個至今

<img src="../../../img/Edit_Icon.png"> 

當我搜索一下，大部分的結果都是關於桌面應用。我是在尋找錯誤的東西還是我在錯誤的軌道上？

Answer 1

它很容易...兩種選擇：

要麼換你img由a標籤。

<a href="javascript:myFunction();"/> <img src="../../../img/Edit_Icon.png" /> </a> 

或任一圖像

<img src="../../../img/Edit_Icon.png" onclick="myFunction()" /> 

上添加onclick事件後一種選擇，我想補充一個樣式改變光標移動到「手」，以幫助用戶瞭解「這是一個可點擊的圖像」

<img src="../../../img/Edit_Icon.png" onclick="myFunction()" style="cursor: pointer;" /> 

JS CODE：

function myFunction(){ 
    var r = confirm("Press a button"); 
    if (r == true) { 
     //your code to run 
    } else { 
     //code to run if cancel; 
    } 

Live Example on w3schools

此外：
如果你想那麼瀏覽器的原生對話框性感的東西，你可以用一個庫...
例如jQuery confirm.js

Answer 2

試試這個

<a href="#" id="pop"><img src="../../../img/Edit_Icon.png">Click Me</a> 

JS代碼：

$("#pop").on("click", function() { 
    //do something here 
});