Boîte de confirmation Oui ou Non en utilisant jQuery

121

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?

Sushanth CS
la source
Jetez un œil à l' interface utilisateur jQuery : jqueryui.com/demos/dialog/#modal-confirmation
jAndy
3
$ .alerts.okButton = 'Oui'; $ .alerts.cancelButton = 'Non'; jConfirm ('Are you sure ??', '', function (r) {if (r == true) {// Ok bouton pressé ...}}
Sushanth CS
2
Une autre solution JQuery Dialog ressemble plus à une fonction confirm () qui renvoie: stackoverflow.com/a/18474005/1876355 J'espère que cela aide
Pierre

Réponses:

129

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();
      }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Thulasiram
la source
2
est-ce jquery-ui ou jquery vieux ordinaire? Je ne vois .dialog () nulle part sur la documentation de jQuery.
chovy
11
Vous devez inclure le script jquery et jquery ui dans votre page.
Thulasiram
@Thulasiram comment puis-je ajouter le plugin dans le yii2framework?
Faisal
113

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');
}
Ana El Bembo
la source
3
confirmest "OK ANNULER" cependant, pas "OUI NON".
KlaymenDK
57

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?

user3678239
la source
3
Cela fonctionne pour moiif(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
Faisal
Plus court return confirm("Are you sure you want to return this meter?")))
Павел Зорин
28

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/

Matthieu Napoli
la source
12

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
);
MSquared
la source
4

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.

JF
la source
0

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

Jim
la source
0

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}

rajan snuriya
la source
-3

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);
thamaht
la source
2
Veuillez utiliser un anglais correct et éviter les abréviations telles que «u». En outre, il est préférable que vous puissiez expliquer un peu votre code pour illustrer et éduquer le PO, et pourquoi vous pensez que votre réponse est meilleure que tout ce qui a été publié précédemment.
Davidmh