Wie implementiere ich den Bestätigungsdialog im Jquery UI-Dialog?

Ich versuche, JQuery UI Dialog zu verwenden, um die hässliche javascript:alert()Box zu ersetzen . In meinem Szenario habe ich eine Liste von Elementen, und neben jedem einzelnen von ihnen würde ich für jedes eine Schaltfläche "Löschen" haben. Das Pseudo-HTML-Setup wird wie folgt aussehen:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

Im JQ-Teil, wenn das Dokument fertig ist, würde ich zuerst das div als modalen Dialog mit der erforderlichen Schaltfläche einrichten und die "a", die ausgelöst werden sollen, auf Bestätigung setzen, bevor sie entfernt werden, wie:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

OK, hier ist das Problem. Während der Initialisierungszeit hat der Dialog keine Ahnung, wer (Element) es startet, und auch die Element-ID (!). Wie kann ich das Verhalten dieser Bestätigungsschaltflächen einrichten, um, wenn der Benutzer immer noch JA wählt, dem Link zu folgen, um sie zu entfernen?

Ich musste nur das gleiche Problem lösen. Der Schlüssel, um dies zum Laufen zu bringen, war, dass das dialogteilweise in der initialisiert werden mussclick Ereignishandler für den Link, mit dem Sie die Bestätigungsfunktion verwenden möchten, (wenn Sie dies für mehr als einen Link verwenden möchten). Dies liegt daran, dass die Ziel-URL für den Link in den Ereignishandler eingefügt werden muss, damit die Bestätigungsschaltfläche angeklickt wird. Ich habe eine CSS-Klasse verwendet, um anzugeben, welche Links das Bestätigungsverhalten haben sollen.

Hier ist meine Lösung, die abstrahiert wurde, um für ein Beispiel geeignet zu sein.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Ich glaube, dass dies für Sie funktionieren würde, wenn Sie Ihre Links mit der CSS-Klasse generieren können (confirmLink in meinem Beispiel).

Hier ist eine jsfiddle mit dem Code darin.

Im Interesse einer vollständigen Offenlegung werde ich feststellen, dass ich einige Minuten mit diesem speziellen Problem verbracht habe und eine ähnliche Antwort auf diese Frage gegeben habe , die zu diesem Zeitpunkt ebenfalls ohne akzeptierte Antwort war.

Ich fand, dass die Antwort von Paul nicht ganz funktionierte, da die Art und Weise, wie er die Optionen einstellte, nachdem der Dialog beim Klickereignis instanziiert wurde, falsch war. Hier ist mein Code, der funktioniert hat. Ich habe es nicht auf Pauls Beispiel zugeschnitten, aber es ist nur der Unterschied eines Katzenschnurrhaars in Bezug auf einige Elemente, die unterschiedlich benannt sind. Sie sollten in der Lage sein, es herauszufinden. Die Korrektur erfolgt im Setter der Dialogoption für die Schaltflächen des Klickereignisses.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

Ich hoffe, das hilft jemand anderem, da dieser Beitrag mich ursprünglich auf den richtigen Weg gebracht hat. Ich dachte, ich sollte die Korrektur besser veröffentlichen.

Ich habe eine eigene Funktion für einen Bestätigungsdialog für die Abfrage erstellt. Hier ist der Code

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

Um dies nun in Ihrem Code zu verwenden, schreiben Sie einfach Folgendes

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

Mach weiter.

Einfache und kurze Lösung, die ich gerade ausprobiert habe und die funktioniert

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

Dann füge einfach die Klasse = "Bestätige" zu deinem Link hinzu und es funktioniert!

Dies ist meine Lösung. Ich hoffe, es hilft jedem. Es ist spontan geschrieben anstatt kopiert, also verzeihen Sie mir alle Fehler.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

Persönlich bevorzuge ich diese Lösung :)

edit: Sorry .. ich hätte es wirklich genauer erklären sollen. Ich mag es, weil es meiner Meinung nach eine elegante Lösung ist. Wenn der Benutzer auf die Schaltfläche klickt, die zuerst bestätigt werden muss, wird das Ereignis so abgebrochen, wie es sein muss. Wenn Sie auf die Bestätigungsschaltfläche klicken, besteht die Lösung nicht darin, einen Linkklick zu simulieren, sondern dasselbe native Abfrageereignis (Klick) auf die ursprüngliche Schaltfläche auszulösen, die ausgelöst worden wäre, wenn es keinen Bestätigungsdialog gegeben hätte. Der einzige Unterschied besteht in einem anderen Ereignis-Namespace (in diesem Fall "bestätigt"), sodass der Bestätigungsdialog nicht erneut angezeigt wird. Der native Jquery-Mechanismus kann dann übernehmen und die Dinge können wie erwartet laufen. Ein weiterer Vorteil ist, dass es für Schaltflächen und Hyperlinks verwendet werden kann. Ich hoffe ich war klar genug.

Ich weiß , dass dies eine alte Frage, aber hier ist meine Lösung HTML5 mit Datenattributen in MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

JS-Code:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

Wird das reichen?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

Wie oben. Frühere Beiträge haben mich auf den richtigen Weg gebracht. So habe ich es gemacht. Die Idee ist, neben jeder Zeile in der Tabelle ein Bild zu haben (generiert durch ein PHP-Skript aus der Datenbank). Wenn Sie auf ein Bild klicken, wird der Benutzer zur URL umgeleitet. Infolgedessen wird der entsprechende Datensatz aus der Datenbank gelöscht, während einige Daten zum angeklickten Datensatz im jQuery UI-Dialogfeld angezeigt werden.

Der JavaScript-Code:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Dialog div:

<div id="confirmDelete" title="Delete User?"></div> 

Bildlink:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

Auf diese Weise können Sie die PHP-Schleifenwerte in das Dialogfeld übergeben. Der einzige Nachteil ist die Verwendung der GET-Methode, um die Aktion tatsächlich auszuführen.

Wie wäre es damit:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

Ich habe es bei diesem HTML getestet:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

Es entfernt das gesamte li-Element, Sie können es an Ihre Bedürfnisse anpassen.

(Ab dem 22.03.2016 funktioniert der Download auf der mit verlinkten Seite nicht mehr. Ich lasse den Link hier, falls der Entwickler ihn irgendwann behebt, weil es sich um ein tolles kleines Plugin handelt. Der ursprüngliche Beitrag folgt Alternative und ein Link, der tatsächlich funktioniert: jquery.confirm .)

Es mag für Ihre Anforderungen zu einfach sein, aber Sie können dieses jQuery-Bestätigungs-Plugin ausprobieren . Es ist sehr einfach zu bedienen und erledigt die Arbeit in vielen Fällen.

So sehr ich es auch hasse, eval zu verwenden, es schien mir der einfachste Weg zu sein, ohne abhängig von den verschiedenen Umständen viele Probleme zu verursachen. Ähnlich wie bei der Javascript-Settimeout-Funktion.

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>

Ich bin selbst darauf gestoßen und habe eine Lösung gefunden, die mehreren Antworten hier ähnelt, aber etwas anders implementiert ist. Ich mochte nicht viele Javascript-Stücke oder irgendwo ein Platzhalter-Div. Ich wollte eine verallgemeinerte Lösung, die dann in HTML verwendet werden kann, ohne bei jeder Verwendung Javascript hinzuzufügen. Folgendes habe ich mir ausgedacht (dies erfordert jquery ui):

Javascript:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

Und dann werden in HTML keine Javascript-Aufrufe oder Verweise benötigt:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Da das title-Attribut für den div-Inhalt verwendet wird, kann der Benutzer die Bestätigungsfrage sogar erhalten, indem er mit der Maus über die Schaltfläche fährt (weshalb ich das title-Attribut für die Kachel nicht verwendet habe). Der Titel des Bestätigungsfensters ist der Inhalt des Alt-Tags. Der Javascript-Snip kann in ein verallgemeinertes .js-Include aufgenommen werden. Durch einfaches Anwenden einer Klasse erhalten Sie ein hübsches Bestätigungsfenster.

$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });

HINWEIS: Nicht genügend Mitarbeiter, um Kommentare abzugeben, aber die Antwort von BineG funktioniert perfekt bei der Lösung von Postback-Problemen mit ASPX-Seiten, wie von Homer und Echo hervorgehoben. Zu Ehren gibt es hier eine Variation, die einen dynamischen Dialog verwendet.

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});

Eine weitere Variante des oben Gesagten, bei der überprüft wird, ob das Steuerelement entweder ein 'asp: linkbutton' oder ein 'asp: button' ist, der als zwei verschiedene HTML-Steuerelemente dargestellt wird. Scheint für mich gut zu funktionieren, habe es aber nicht ausgiebig getestet.

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });

Ich habe danach gesucht, um dies für Link-Schaltflächen in einem ASP.NET-Gridview zu verwenden (in Befehle eingebautes GridView-Steuerelement). Daher muss die Aktion "Bestätigen" im Dialogfeld ein vom Gridview-Steuerelement zur Laufzeit generiertes Skript aktivieren. das hat bei mir funktioniert:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });

Ich weiß, dass diese Frage alt ist, aber ich musste zum ersten Mal einen Bestätigungsdialog verwenden. Ich denke, das ist der kürzeste Weg.

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

Ich hoffe du magst es :)

Persönlich sehe ich dies in vielen Ansichten vieler ASP.Net MVC-Anwendungen als wiederkehrende Anforderung.

Deshalb habe ich eine Modellklasse und eine Teilansicht definiert:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

Und meine Teilansicht:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

Und dann verwenden Sie jedes Mal, wenn Sie es in einer Ansicht benötigen, einfach @ Html.Partial (in Abschnittsskripten, damit JQuery definiert wird):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

Der Trick besteht darin, den JQueryClickSelector anzugeben, der den Elementen entspricht, die einen Bestätigungsdialog benötigen. In meinem Fall alle Anker mit der Klasse SyLinkDelete, aber es könnte ein Bezeichner, eine andere Klasse usw. sein. Für mich war es eine Liste von:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

Sehr beliebtes Thema und Google findet dies für die Abfrage "JQuery-Dialog schließen, auf welches Ereignis geklickt wurde". Meine Lösung behandelt YES-, NO-, ESC_KEY- und X-Ereignisse ordnungsgemäß. Ich möchte, dass meine Rückruffunktion aufgerufen wird, unabhängig davon, wie der Dialog angeordnet wurde.

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

Es ist einfach, den Browser auf eine neue URL umzuleiten oder etwas anderes für die Funktionsüberholung auszuführen.

So viele gute Antworten hier;) Hier ist mein Ansatz. Ähnlich wie bei eval ().

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

Und die Verwendung sieht aus wie:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

Die JQuery-Benutzeroberfläche bietet sofort folgende Lösung:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Sie können dies weiter anpassen, indem Sie einen Namen für die JQuery-Funktion angeben und den Text / Titel übergeben, der als Parameter angezeigt werden soll.

Referenz: https://jqueryui.com/dialog/#modal-confirmation

Nun, das ist die Antwort auf Ihre Fragen ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

Stellen Sie sicher, dass Sie jquery 1.4.4 und jquery.ui haben

Einfacher Weg mit einem Hauch von Javascript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}