JavaScript или jQuery "Вы уверены?" диалога для ссылки <a>?

У меня есть ссылка в моем HTML:

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

Посещение ссылки DoSomethingDangerous вызывает нелегкое обратимое действие.

Итак, после того, как нажимается ссылка, мне бы хотелось открыть диалоговое окно (например, "Вы уверены?" "ОК" "Отмена" ), и если пользователь нажимает "Отмена", ссылка не посещается, и браузер остается на на той же странице.

Какая самая чистая техника использует Javascript или jQuery для реализации этого?

Ответы

Ответ 1

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

JQuery:

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

Ответ 2

Если мы знаем, что функция DOM window.confirm() возвращает boolean true на "yes" и false на "no", наша ссылка может быть немного упрощена:

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

Ответ 3

Я думаю, что самым простым решением будет

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

Ответ 4

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

Демо: http://jsfiddle.net/PDj9H/