☰

JavaScriptまたはjQueryの「よろしいですか？」ダイアログリンク？質問する

tag-icon • tag-icon javascript jquery html
JavaScriptまたはjQueryの「よろしいですか？」ダイアログリンク？質問する

HTML にリンクがあります:

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

DoSomethingDangerous リンクにアクセスすると、簡単には元に戻せないアクションが発生します。

したがって、リンクがクリックされた後にダイアログ ボックス (例: 「よろしいですか?」「OK」「キャンセル」) が表示され、ユーザーがキャンセルをクリックするとリンクは表示されず、ブラウザーは同じページに残ります。

これを実装するために、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

おすすめ記事