5

データベースからのデータが入力されたテーブルがあり、各行にはアンカー要素を含むセルがあります。このアンカーは同じページにつながりますが、削除するデータが含まれている行をphpに通知するクエリ文字列が含まれます。

ユーザーがURLをロードする前に意図を確認するように求めるアンカーをクリックしたときに、jQueryダイアログボックスを開く必要があります。「キャンセル」ボタンはダイアログを閉じ、何もしません。[OK]ボタンをクリックすると、URLが開きます。

どんな助けでも大歓迎です。

//「試したこと」で編集します。jQueryをいじるのは初めてで、勉強する時間がなくなりました... =（

jQuery(document).ready(function(){
var $dialog = jQuery('<div class='msg_dialog'></div>')
    .html('Are you sure you want to do this?')
    .dialog({
        autoOpen: false,
        title: 'Confirm action',
        buttons: [{
            text: "Cancel",
            click: function(){
                jQuery(this).dialog("close");
            }
        }] // didn't even try the OK button since I couldn't even get the dialog opened
    });

jQuery('#confirm_del').click(function(){
    $dialog.dialog('open');
    return false;
});
});
4

4 に答える 4

28 
$("a").on("click", function(e) {
    var link = this;

    e.preventDefault();

    $("<div>Are you sure you want to continue?</div>").dialog({
        buttons: {
            "Ok": function() {
                window.location = link.href;
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
});

例: http://jsfiddle.net/uRGJD/

(Google へのリダイレクトは JSFiddle では機能しませんが、通常のページでは機能するはずです)

于 2012-07-18T00:40:30.510 に答える
7

使用方法：

<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
     Go
</a>
于 2012-07-18T00:40:29.963 に答える
2

ボタンを作成するダイアログを作成することもできますが、JavaScript を使用してナビゲートする代わりに実際のリンクを使用できるように、自分でボタンを作成するアプローチが気に入っています。

実際のデモ: http://jsfiddle.net/gilly3/sdzbB/

<div id="dialog-confirm">
    <div class="message">Are you sure?</div>
    <div class="buttons">
        <a class="cancel" href="#">Cancel</a>
        <a class="ok" href="#">Ok</a>
    </div>
</div>

$("#dialog-confirm").dialog({ autoOpen: false }).find("a.cancel").click(function(e){
    e.preventDefault();
    $("#dialog-confirm").dialog("close");
});
$("a[href]:not(#dialog-confirm a)").click(function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .dialog("option", "title", $(this).text())
        .dialog("open")
        .find("a.ok").attr({
            href: this.href,
            target: this.target
        });
});

の代わりに実際のリンクを使用する利点はlocation.href = link、リンクを新しいタブで開くためのマウス ショートカット、リンクをブックマーク バーまたはデスクトップにドラッグする機能、コピーする機能など、あらゆる種類の組み込み機能を利用できることです。クリップボードへのリンク、タブによるキーボード アクセスなど。

于 2012-07-18T00:52:48.923 に答える
0

このコードのように実行できるリンクのデフォルトの動作を防止する必要があります。

$('.tableId tr td a').click(function(event){
    //code to display confirmation dialog  
    event.preventDefault();

  }

この JQuery プラグインを確認ダイアログに使用できます。http://jqueryui.com/demos/dialog/#modal-confirmation

于 2012-07-18T00:42:45.457 に答える