web-dev-qa-db-fra.com

Oui ou non confirmer la boîte en utilisant jQuery

Je veux des alertes oui/non avec 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...
    }  
}

Toute autre alternative?

jqueryalertsjconfirm
105
Sushanth CS
ConfirmDialog('Are you sure');

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

                $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');

                $(this).dialog("close");
            },
            No: function () {                                                                 
                $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    });
};

S'il vous plaît trouver le Demo .

112
Thulasiram

La méthode d'alerte 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');
}
97
Ana El Bembo

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?

42
user3678239

Jetez un coup d'oeil à ce plugin jQuery: jquery.confirm .

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

et alors:

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

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

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

28
Matthieu Napoli

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 de pouvoir appeler quelle que soit la 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 ça:

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

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

J'ai eu du mal à obtenir la réponse à partir de la boîte de dialogue, mais j'ai finalement trouvé une solution en combinant la réponse de cette autre question display-yes-and-no-buttons-à la place de ok-and-cancel-in confirm-box 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 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 afin 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 est de créer la confirmation confirmBox dans la fonction doConfirm, comme l’a fait ThulasiRam dans sa réponse.

2
J F

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

0
Jim