Jak zaimplementować okno dialogowe „potwierdzenie” w oknie dialogowym JQuery UI?

Próbuję użyć javascript:alert()okna dialogowego interfejsu użytkownika JQuery, aby zastąpić brzydkie pudełko. W moim scenariuszu mam listę elementów, a obok każdego z nich miałbym przycisk „usuń” dla każdego z nich. pseudo html będzie wyglądać następująco:

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

W części JQ, w dokumencie gotowym, najpierw ustawiłbym element div tak, aby był modalnym oknem dialogowym z niezbędnym przyciskiem i ustawił te „a”, aby uruchamiały się w celu potwierdzenia przed usunięciem, na przykład:

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

OK, tu jest problem. w trakcie inicjalizacji okno dialogowe nie będzie miało pojęcia, kto (element) go uruchomi, a także identyfikator elementu (!). Jak mogę skonfigurować zachowanie tych przycisków potwierdzających, aby jeśli użytkownik nadal wybierał TAK, skorzystał z linku, aby go usunąć?

Po prostu musiałem rozwiązać ten sam problem. Kluczem do tego, aby to zadziałało, było to, że dialogmusi być częściowo zainicjowany wclick module obsługi zdarzeń dla łącza, z którym chcesz użyć funkcji potwierdzania (jeśli chcesz użyć tego dla więcej niż jednego łącza). Dzieje się tak, ponieważ docelowy adres URL łącza musi zostać wstrzyknięty do modułu obsługi zdarzeń w celu kliknięcia przycisku potwierdzenia. Użyłem klasy CSS, aby wskazać, które linki powinny mieć zachowanie potwierdzenia.

Oto moje rozwiązanie, wyabstrahowane, aby nadać się na przykład.

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

Uważam, że to zadziała, jeśli możesz wygenerować swoje linki za pomocą klasy CSS ( confirmLinkw moim przykładzie).

Oto plik jsfiddle z zawartym w nim kodem.

W celu pełnego ujawnienia zauważę, że poświęciłem kilka minut na ten konkretny problem i udzieliłem podobnej odpowiedzi na to pytanie , która również była wówczas bez akceptowanej odpowiedzi.

Okazało się, że odpowiedź Paula nie do końca działa, ponieważ sposób, w jaki ustawiał opcje PO wywołaniu okna dialogowego w zdarzeniu kliknięcia, był nieprawidłowy. Oto mój kod, który działał. Nie dostosowałem tego do przykładu Paula, ale to tylko różnica między wąsami kota, ponieważ niektóre elementy są nazwane inaczej. Powinieneś być w stanie to rozwiązać. Korekta znajduje się w ustawieniach opcji dialogowych dla przycisków zdarzenia kliknięcia.

$(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");

    });

});

Mam nadzieję, że pomoże to komuś innemu, ponieważ ten post pierwotnie doprowadził mnie do właściwej ścieżki, pomyślałem, że lepiej opublikuję korektę.

Stworzyłem własną funkcję dla okna dialogowego potwierdzenia interfejsu jQuery. Oto kod

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');
      }
    }
  });
}

Teraz, aby użyć tego w swoim kodzie, po prostu napisz następujące

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

Trwać.

Proste i krótkie rozwiązanie, które właśnie wypróbowałem i działa

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

następnie po prostu dodaj klasę = "confirm" do swojego linku i działa!

To jest moje rozwiązanie… mam nadzieję, że pomoże każdemu. Jest napisany w locie, a nie kopiowany, więc wybacz mi wszelkie błędy.

$("#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");
    }
});

Osobiście wolę to rozwiązanie :)

edycja: Przepraszam ... naprawdę powinienem to wyjaśnić bardziej szczegółowo. Podoba mi się, bo moim zdaniem to eleganckie rozwiązanie. Gdy użytkownik kliknie przycisk, który musi być najpierw potwierdzony, zdarzenie jest anulowane, tak jak powinno. Po kliknięciu przycisku potwierdzenia rozwiązaniem nie jest symulacja kliknięcia łącza, ale wywołanie tego samego natywnego zdarzenia jquery (kliknięcia) na oryginalnym przycisku, które zostałoby uruchomione, gdyby nie było okna dialogowego potwierdzenia. Jedyną różnicą jest inna przestrzeń nazw zdarzenia (w tym przypadku „potwierdzona”), dzięki czemu okno dialogowe potwierdzenia nie jest ponownie wyświetlane. Natywny mechanizm Jquery może wtedy przejąć kontrolę i wszystko może działać zgodnie z oczekiwaniami. Kolejną zaletą jest to, że można go używać do przycisków i hiperłączy. Mam nadzieję, że wyraziłem się wystarczająco jasno.

Wiem, że to stare pytanie, ale oto moje rozwiązanie wykorzystujące atrybuty danych HTML5 w MVC4:

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

Kod JS:

$("#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");
});

Czy to da radę?

$("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');
});

Jak powyżej. Poprzednie posty zaprowadziły mnie na właściwą ścieżkę. Tak to zrobiłem. Pomysł polega na tym, aby mieć obraz obok każdego wiersza w tabeli (generowany przez skrypt PHP z bazy danych). Po kliknięciu obrazu użytkownik zostałby przekierowany do adresu URL, w wyniku czego odpowiedni rekord zostałby usunięty z bazy danych, jednocześnie pokazując dane związane z klikniętym rekordem w oknie dialogowym jQuery UI.

Kod JavaScript:

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

Link do obrazu:

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

W ten sposób możesz przekazać wartości pętli PHP do okna dialogowego. Jedynym minusem jest użycie metody GET do faktycznego wykonania akcji.

Co powiesz na to:

$("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;
});

Przetestowałem to w tym html:

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

Usuwa cały element li, możesz go dostosować do swoich potrzeb.

(Od 22.03.2016 pobieranie na stronie, do której prowadzi link, nie działa. Zostawiam link tutaj, na wypadek, gdyby programista w pewnym momencie go naprawił, ponieważ jest to świetna mała wtyczka. Oryginalny post jest następujący. alternatywa i link, który faktycznie działa: jquery.confirm .)

Może to być zbyt proste dla Twoich potrzeb, ale możesz wypróbować tę wtyczkę jQuery confirm . Jest naprawdę prosty w użyciu iw wielu przypadkach spełnia swoje zadanie.

Chociaż nienawidzę używać eval, wydawało mi się to najłatwiejszym sposobem, bez powodowania wielu problemów w zależności od różnych okoliczności. Podobna do funkcji settimeout javascript.

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

Sam natknąłem się na to i otrzymałem rozwiązanie, które jest podobne do kilku odpowiedzi tutaj, ale zaimplementowane nieco inaczej. Nie podobało mi się wiele fragmentów javascript lub gdzieś zastępczy div. Chciałem uogólnionego rozwiązania, które mogłoby być następnie używane w HTML bez dodawania javascript przy każdym użyciu. Oto co wymyśliłem (to wymaga 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");
        }
      }
    });

  });

});

W HTML nie są potrzebne żadne wywołania ani odwołania javascript:

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

Ponieważ atrybut title jest używany do zawartości div, użytkownik może nawet uzyskać pytanie potwierdzające, najeżdżając kursorem na przycisk (dlatego nie użyłem atrybutu tytułu dla kafelka). Tytuł okna potwierdzenia to treść tagu alt. Fragment kodu javascript można dołączyć do uogólnionego dołączenia .js, a po prostu stosując klasę, masz ładne okno potwierdzenia.

$("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;
        });

UWAGA: Za mało przedstawiciela, aby skomentować, ale odpowiedź BineG działa doskonale w rozwiązywaniu problemów związanych z ogłaszaniem zwrotnym ze stronami ASPX, co zostało podkreślone przez Homera i echo. Na cześć, oto odmiana wykorzystująca dynamiczne okno dialogowe.

$('#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();  
});

Inna odmiana powyższego, w której sprawdza, czy kontrolka jest „asp: linkbutton” lub „asp: button”, która renderuje się jako dwie różne kontrolki HTML. Wydaje mi się, że działa dobrze, ale nie testowałem go szczegółowo.

        $(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");
        });

Szukałem tego do użycia na przyciskach linków w widoku Gridview ASP.NET (kompilacja kontrolki GridView w poleceniach), więc akcja „Potwierdź” w oknie dialogowym musi aktywować skrypt generowany przez formant Gridview w czasie wykonywania. to zadziałało dla mnie:

 $(".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");
             }
         }
     });
 });

Wiem, że to pytanie jest stare, ale po raz pierwszy musiałem użyć okna dialogowego z potwierdzeniem. Myślę, że to najkrótsza droga.

$(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;
});

Mam nadzieję, że to lubisz :)

Osobiście postrzegam to jako powtarzające się wymaganie w wielu widokach wielu aplikacji ASP.Net MVC.

Dlatego zdefiniowałem klasę modelu i widok częściowy:

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; }
  }
}

I mój częściowy pogląd:

@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>

A potem, za każdym razem, gdy potrzebujesz go w widoku, po prostu używasz @ Html.Partial (w zrobiłem to w skryptach sekcji, aby zdefiniować JQuery):

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

Sztuczka polega na określeniu JQueryClickSelector, który będzie pasował do elementów, które wymagają potwierdzenia w oknie dialogowym. W moim przypadku wszystkie kotwice z klasą SyLinkDelete ale może to być identyfikator, inna klasa itp. Dla mnie była to lista:

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

Bardzo popularny temat, a Google wyszukuje to dla zapytania „jquery dialog close, które zdarzenie zostało kliknięte”. Moje rozwiązanie poprawnie obsługuje zdarzenia YES, NO, ESC_KEY, X. Chcę, aby moja funkcja zwrotna była wywoływana bez względu na sposób usunięcia okna dialogowego.

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);
});

Łatwo jest przekierować przeglądarkę na nowy adres URL lub wykonać coś innego na funkcji retval.

Tyle dobrych odpowiedzi;) Oto moje podejście. Podobny do użycia 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'
            }
        ]
    });     
}

A użycie wygląda następująco:

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

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

Po wyjęciu z pudełka interfejs użytkownika JQuery oferuje następujące rozwiązanie:

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

Możesz to dodatkowo dostosować, podając nazwę funkcji JQuery i przekazując tekst / tytuł, który chcesz wyświetlić jako parametr.

Źródła: https://jqueryui.com/dialog/#modal-confirmation

Cóż, to jest odpowiedź na twoje pytania ...

<!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>

upewnij się, że masz jquery 1.4.4 i jquery.ui

Łatwy sposób z odrobiną 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();
}