Oui ou non confirmer la case en utilisant jQuery

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

utiliser la fonction confirmer:

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 ce soit correct. Qu'en pensez-vous?

Regardez ce plugin jQuery: jquery.confirmez .

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

et ensuite:

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

cela affichera un popup de confirmation avant de passer au lien suivant.

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.

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 à obtenir la réponse de la boîte de dialogue, mais j'ai finalement trouvé une solution en combinant la réponse de cette autre question affichage-Oui-et-non-boutons-au lieu-de-ok-et-Annuler-dans-confirmer-boîte avec une partie du code de la modal-confirmation dialogue

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

créer 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éer votre propre méthode confirm() :

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 MODIFICATIONS J'ai modifié ce qui précède de sorte qu'au lieu d'appeler confirmBox.show() j'ai utilisé confirmBox.dialog({...}) comme ceci

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 fait était de créer la div confirmmbox dans la fonction doConfirm, comme ThulasiRam l'a fait dans sa réponse.

j'ai dû appliquer une traduction aux boutons Ok et Cancel. 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);
    }
});

vous pouvez réutiliser votre confirmer:

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