JavaScript或jQuery“你确定吗？” <a> link?</a>的对话框

Question

我的HTML中有一个链接：

<a href="/DoSomethingDangerous">do something dangerous</a>

访问DoSomethingDangerous链接会导致不易发生可逆操作。

所以在点击链接后我想要一个对话框（例如“你确定吗？”，“确定”，“取消”），如果用户点击取消，则不访问链接，浏览器保持在同一页。

使用Javascript或jQuery实现此目的的最干净的技术是什么？

Answer 1

<a class="confirm" href="/DoSomethingDangerous">do something dangerous</a>

的javascript：

$(function() {
    $('.confirm').click(function(e) {
        e.preventDefault();
        if (window.confirm("Are you sure?")) {
            location.href = this.href;
        }
    });
});

甚至更简单：

$(function() {
    $('.confirm').click(function() {
        return window.confirm("Are you sure?");
    });
});

无法设置原生确认框的样式。 如果你想要样式，那么你可以使用jQuery.UI.dialog

Answer 2

如果我们知道DOM函数window.confirm()在“是”上返回布尔true而在“否”上返回false，我们的链接可以简化一点：

<a href="/DoSomething" onclick="return confirm('Are you sure?');">Link</a>

Answer 3

我认为最简单的解决方案是

<a href="/DoSomethingDangerous" onclick="if (!confirm('Are you sure?')) return false;">Link test</a>

Answer 4

$('a').click(function(e)
{
    if(confirm("Are you sure?"))
    {
        alert('navigate!');
    }
    else
    {
        e.preventDefault();
    }
});

演示：http://jsfiddle.net/PDj9H/

Answer 5

我建议您使用jQuery UI modal-confirmation对话框 - http://jqueryui.com/demos/dialog/#modal-confirmation。