Comment implémenter la boîte de dialogue de «confirmation» dans la boîte de dialogue Jquery UI?

J'essaye d'utiliser la boîte de dialogue JQuery UI pour remplacer la javascript:alert()boîte laide . Dans mon scénario, j'ai une liste d'éléments, et à côté de chacun d'entre eux, j'aurais un bouton «supprimer» pour chacun d'eux. la configuration html psuedo sera quelque chose qui suit:

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

Dans la partie JQ, sur le document prêt, je configurerais d'abord le div pour être une boîte de dialogue modale avec le bouton nécessaire, et définirais ces "a" pour qu'ils se déclenchent en confirmation avant de supprimer, comme:

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

OK, voici le problème. pendant le temps d'initialisation, la boîte de dialogue n'aura aucune idée de qui (l'élément) le déclenchera, ni de l'identifiant de l'élément (!). Comment puis-je configurer le comportement de ces boutons de confirmation afin que, si l'utilisateur choisit toujours OUI, il suivra le lien pour le supprimer?

Je devais juste résoudre le même problème. La clé pour que cela fonctionne était que le dialogdoit être partiellement initialisé dans le clickgestionnaire d'événements pour le lien avec lequel vous souhaitez utiliser la fonctionnalité de confirmation (si vous souhaitez l'utiliser pour plus d'un lien). En effet, l'URL cible du lien doit être injectée dans le gestionnaire d'événements pour le clic du bouton de confirmation. J'ai utilisé une classe CSS pour indiquer quels liens devraient avoir le comportement de confirmation.

Voici ma solution, abstraite pour convenir à un exemple.

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

Je crois que cela fonctionnerait pour vous, si vous pouvez générer vos liens avec la classe CSS ( confirmLink, dans mon exemple).

Voici un jsfiddle avec le code dedans.

Dans l'intérêt d'une divulgation complète, je noterai que j'ai passé quelques minutes sur ce problème particulier et que j'ai fourni une réponse similaire à cette question , qui était également sans réponse acceptée à l'époque.

J'ai trouvé que la réponse de Paul ne fonctionnait pas tout à fait car la façon dont il définissait les options APRÈS que la boîte de dialogue ait été instanciée sur l'événement de clic était incorrecte. Voici mon code qui fonctionnait. Je ne l'ai pas adapté pour correspondre à l'exemple de Paul, mais ce n'est que la différence d'un chat en ce que certains éléments sont nommés différemment. Vous devriez pouvoir y arriver. La correction se trouve dans le paramètre de l'option de dialogue pour les boutons sur l'événement de clic.

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

    });

});

J'espère que cela aide quelqu'un d'autre, car ce message m'a à l'origine mis sur la bonne voie, je pensais que je ferais mieux de publier la correction.

J'ai créé ma propre fonction pour une boîte de dialogue de confirmation jquery ui. Voici le 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');
      }
    }
  });
}

Maintenant, pour utiliser ceci dans votre code, écrivez simplement ce qui suit

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

Continue.

Solution simple et courte que je viens d'essayer et cela fonctionne

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

puis ajoutez simplement le class = "confirm" à votre lien et cela fonctionne!

C'est ma solution .. j'espère que cela aide n'importe qui. Il est écrit à la volée au lieu d'être copypasté, alors pardonnez-moi toute erreur.

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

Personnellement je préfère cette solution :)

edit: Désolé .. je devrais vraiment l'expliquer plus en détail. Je l'aime car à mon avis, c'est une solution élégante. Lorsque l'utilisateur clique sur le bouton qui doit être confirmé en premier, l'événement est annulé comme il se doit. Lorsque le bouton de confirmation est cliqué, la solution n'est pas de simuler un clic de lien mais de déclencher le même événement jquery natif (clic) sur le bouton d'origine qui se serait déclenché s'il n'y avait pas de dialogue de confirmation. La seule différence étant un espace de noms d'événement différent (dans ce cas «confirmé») de sorte que la boîte de dialogue de confirmation ne s'affiche plus. Le mécanisme natif de Jquery peut alors prendre le relais et les choses peuvent fonctionner comme prévu. Un autre avantage étant qu'il peut être utilisé pour les boutons et les hyperliens. J'espère avoir été assez clair.

Je sais que c'est une vieille question mais voici ma solution utilisant les attributs de données HTML5 dans MVC4:

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

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

Ça fera l'affraire?

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

Comme ci-dessus. Les messages précédents m'ont mis sur la bonne voie. Voilà comment je l'ai fait. L'idée est d'avoir une image à côté de chaque ligne de la table (générée par un script PHP à partir de la base de données). Lorsqu'un utilisateur clique sur une image, l'utilisateur est redirigé vers l'URL et, par conséquent, l'enregistrement approprié est supprimé de la base de données tout en affichant certaines données liées à l'enregistrement cliqué dans la boîte de dialogue de l'interface utilisateur jQuery.

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

Boîte de dialogue div:

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

Lien image:

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

De cette façon, vous pouvez passer les valeurs de la boucle PHP dans la boîte de dialogue. Le seul inconvénient est d'utiliser la méthode GET pour effectuer réellement l'action.

Que dis-tu de ça:

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

Je l'ai testé à ce 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>

Il supprime tout l'élément li, vous pouvez l'adapter à vos besoins.

(Depuis le 22/03/2016, le téléchargement sur la page liée à ne fonctionne pas. Je laisse le lien ici au cas où le développeur le corrige à un moment donné parce que c'est un super petit plugin. Le message original suit. Un alternative, et un lien qui fonctionne réellement: jquery.confirm .)

C'est peut-être trop simple pour vos besoins, mais vous pouvez essayer ce plugin de confirmation jQuery . C'est vraiment simple à utiliser et fait le travail dans de nombreux cas.

Même si je déteste utiliser eval, cela m'a semblé être le moyen le plus simple, sans causer beaucoup de problèmes selon les circonstances. Similaire à la fonction javascript settimeout.

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

Je suis tombé sur cela moi-même et je me suis retrouvé avec une solution, qui est similaire à plusieurs réponses ici, mais implémentée légèrement différemment. Je n'aimais pas beaucoup de morceaux de javascript, ou un espace réservé div quelque part. Je voulais une solution généralisée, qui pourrait ensuite être utilisée en HTML sans ajouter de javascript à chaque utilisation. Voici ce que j'ai proposé (cela nécessite 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");
        }
      }
    });

  });

});

Et puis en HTML, aucun appel ou référence javascript n'est nécessaire:

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

Étant donné que l'attribut title est utilisé pour le contenu div, l'utilisateur peut même obtenir la question de confirmation en survolant le bouton (c'est pourquoi je n'ai pas utilisé l'attribut title pour la vignette). Le titre de la fenêtre de confirmation est le contenu de la balise alt. Le snip javascript peut être inclus dans un include généralisé .js, et simplement en appliquant une classe, vous avez une jolie fenêtre de confirmation.

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

REMARQUE: pas assez de représentants pour commenter, mais la réponse de BineG fonctionne parfaitement pour résoudre les problèmes de publication avec les pages ASPX comme souligné par Homer et écho. En l'honneur, voici une variante utilisant un dialogue dynamique.

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

Une autre variante de ce qui précède où il vérifie si le contrôle est soit un 'asp: linkbutton' ou 'asp: button' qui est rendu comme deux contrôles html différents. Cela semble fonctionner très bien pour moi, mais je ne l'ai pas testé de manière approfondie.

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

Je cherchais ceci à utiliser sur des boutons de lien dans un Gridview ASP.NET (contrôle GridView construit dans les commandes) Ainsi, l'action "Confirmer" dans la boîte de dialogue doit activer un script généré par le contrôle Gridview au moment de l'exécution. cela a fonctionné pour moi:

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

Je sais que cette question est ancienne mais c'était la première fois que je devais utiliser une boîte de dialogue de confirmation. Je pense que c'est le moyen le plus court de le faire.

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

J'espère que tu aimes :)

Personnellement, je vois cela comme une exigence récurrente dans de nombreuses vues de nombreuses applications ASP.Net MVC.

C'est pourquoi j'ai défini une classe de modèle et une vue partielle:

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

Et ma vision partielle:

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

Et puis, chaque fois que vous en avez besoin dans une vue, il vous suffit d'utiliser @ Html.Partial (dans les scripts de section pour que JQuery soit défini):

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

L'astuce consiste à spécifier le JQueryClickSelector qui correspondra aux éléments qui nécessitent une boîte de dialogue de confirmation. Dans mon cas, toutes les ancres avec la classe SyLinkDelete mais cela pourrait être un identifiant, une classe différente etc. Pour moi c'était une liste de:

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

Sujet très populaire et Google le trouve pour la requête "jquery dialog close which event was clicked". Ma solution gère correctement les événements OUI, NON, ESC_KEY, X. Je veux que ma fonction de rappel soit appelée quelle que soit la manière dont le dialogue a été supprimé.

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

Il est facile de rediriger le navigateur vers une nouvelle URL ou d'effectuer autre chose sur la fonction retval.

Autant de bonnes réponses ici;) Voici ma démarche. Utilisation similaire à 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'
            }
        ]
    });     
}

Et l'utilisation ressemble à:

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

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

L'interface utilisateur JQuery prête à l'emploi offre cette solution:

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

Vous pouvez personnaliser davantage cela en fournissant un nom pour la fonction JQuery et en transmettant le texte / titre que vous souhaitez afficher en tant que paramètre.

Référence: https://jqueryui.com/dialog/#modal-confirmation

Eh bien, c'est la réponse à vos questions ...

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

assurez-vous d'avoir jquery 1.4.4 et jquery.ui

Un moyen facile avec une touche de 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();
}