通过单击图像使对话框出现答案

【问题标题】：Making a dialog box appear by clicking an image通过单击图像使对话框出现
【发布时间】：2015-10-27 11:27:33
【问题描述】：

我需要在我们的网页中制作一个可点击的图标，然后应该会出现一个对话框来确认该操作。单击“是”后，一些方法将开始工作，一些存储过程将开始工作等等......

可惜我目前只有这个

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

当我搜索它时，大部分结果都是关于桌面应用程序的。我是在搜索错误的东西还是走错了路？

【问题讨论】：

标签： c# asp.net webforms dialog

【解决方案1】：

很简单...两种选择：

要么用 a 标签包装你的 img。

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

或者在图片上添加一个onclick事件

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

对于后一个选项，我会添加一个样式以将光标更改为“手”，以帮助用户理解“这是一个可点击的图像”

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

JS代码：

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

【讨论】：

感谢您的回复，但我需要在图像点击和功能之间放置一个对话框。仅当在对话框上单击“是”时，该功能才起作用。我该怎么做？我应该把对话框放到点击事件中吗？

【解决方案2】：

试试这个

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

JS 代码：

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

【讨论】：