Boîte de confirmation Oui ou Non en utilisant jQuery

Je veux des alertes oui / non en utilisant jQuery, au lieu du bouton ok / Cancel:

jQuery.alerts.okButton = 'Yes';
jQuery.alerts.cancelButton = 'No';                  
jConfirm('Are you sure??',  '', function(r) {
    if (r == true) {                    
        //Ok button pressed...
    }  
}

D'autres alternatives?

La méthode alert bloque l'exécution jusqu'à ce que l'utilisateur la ferme:

utilisez la fonction de confirmation:

if (confirm('Some message')) {
    alert('Thanks for confirming');
} else {
    alert('Why did you press cancel? You should have confirmed');
}

J'ai utilisé ces codes:

HTML:

<a id="delete-button">Delete</a>

jQuery:

<script>
$("#delete-button").click(function(){
    if(confirm("Are you sure you want to delete this?")){
        $("#delete-button").attr("href", "query.php?ACTION=delete&ID='1'");
    }
    else{
        return false;
    }
});
</script>

Ces codes fonctionnent pour moi, mais je ne suis pas vraiment sûr que cela soit correct. Qu'est-ce que tu penses?

Jetez un œil à ce plugin jQuery: jquery.confirm .

<a href="home" class="confirm">Go to home</a>

puis:

$(".confirm").confirm();

Cela affichera une fenêtre contextuelle de confirmation avant de continuer à suivre le lien.

Il y a une démo ici: http://myclabs.github.com/jquery.confirm/

Tous les exemples que j'ai vus ne sont pas réutilisables pour différentes questions de type "oui / non". Je cherchais quelque chose qui me permettrait de spécifier un rappel afin que je puisse appeler pour n'importe quelle situation.

Ce qui suit fonctionne bien pour moi:

$.extend({ confirm: function (title, message, yesText, yesCallback) {
    $("<div></div>").dialog( {
        buttons: [{
            text: yesText,
            click: function() {
                yesCallback();
                $( this ).remove();
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).remove();
            }
        }
        ],
        close: function (event, ui) { $(this).remove(); },
        resizable: false,
        title: title,
        modal: true
    }).text(message).parent().addClass("alert");
}
});

Je l'appelle alors comme ceci:

var deleteOk = function() {
    uploadFile.del(fileid, function() {alert("Deleted")})
};

$.confirm(
    "CONFIRM", //title
    "Delete " + filename + "?", //message
    "Delete", //button text
    deleteOk //"yes" callback
);

J'ai eu du mal à récupérer la réponse dans la boîte de dialogue, mais j'ai finalement trouvé une solution en combinant la réponse de cette autre question: afficher-oui-et-non-boutons-au lieu-de-ok-et-annuler-dans-confirmer- boîte avec une partie du code de la boîte de dialogue de confirmation modale

Voici ce qui a été suggéré pour l'autre question:

Créez votre propre boîte de confirmation:

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

Créez votre propre confirm()méthode:

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

Appelez-le par votre code:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

MES CHANGEMENTS J'ai modifié ce qui précède pour qu'au lieu d'appeler, confirmBox.show() j'utilise confirmBox.dialog({...}) comme ça

confirmBox.dialog
    ({
      autoOpen: true,
      modal: true,
      buttons:
        {
          'Yes': function () {
            $(this).dialog('close');
            $(this).find(".yes").click();
          },
          'No': function () {
            $(this).dialog('close');
            $(this).find(".no").click();
          }
        }
    });

L'autre changement que j'ai apporté a été de créer la div confirmBox dans la fonction doConfirm, comme ThulasiRam l'a fait dans sa réponse.

J'avais besoin d'appliquer une traduction aux boutons Ok et Annuler. J'ai modifié le code pour exclure le texte dynamique (appelle ma fonction de traduction)

$.extend({
    confirm: function(message, title, okAction) {
        $("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            width: 500,
            buttons: [{
                text: localizationInstance.translate("Ok"),
                click: function () {
                    $(this).dialog("close");
                    okAction();
                }
            },
                {
                text: localizationInstance.translate("Cancel"),
                click: function() {
                    $(this).dialog("close");
                }
            }],
            close: function(event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
    }
});

Essayez ceci ... C'est très simple, utilisez simplement la boîte de dialogue de confirmation pour l'alerte avec OUI | NON.

if (confirm ("Voulez-vous mettre à jour?")) {Votre code}

Vous pouvez réutiliser votre confirmation:

    function doConfirm(body, $_nombrefuncion)
    {   var param = undefined;
        var $confirm = $("<div id='confirm' class='hide'></div>").dialog({
            autoOpen: false,
            buttons: {
                Yes: function() {
                param = true;
                $_nombrefuncion(param);
                $(this).dialog('close');
            },
                No: function() {
                param = false;
                $_nombrefuncion(param);
                $(this).dialog('close');
            }
                                    }
        });
        $confirm.html("<h3>"+body+"<h3>");
        $confirm.dialog('open');                                     
    };

// for this form just u must change or create a new function for to reuse the confirm
    function resultadoconfirmresetVTyBFD(param){
        $fecha = $("#asigfecha").val();
        if(param ==true){
              // DO THE CONFIRM
        }
    }

//Now just u must call the function doConfirm
    doConfirm('body message',resultadoconfirmresetVTyBFD);