通过单击图像显示对话框

Question

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

可惜我目前只有这个

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

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

Answer 1

很简单...两个选项：

用 a 标签包裹你的 img。

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

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

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

对于后一个选项，我会添加一种样式将光标更改为 "hand" 以帮助用户理解 "this is a clickable image"

<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

Answer 2

试试这个

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

JS代码：

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

通过单击图像显示对话框

Making a dialog box appear by clicking an image

c#

asp.net

webforms

dialog