Sì o No confermare la casella utilizzando jQuery


121

Voglio avvisi sì / no usando jQuery, invece del pulsante ok / Annulla:

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

Altre alternative?



Dai un'occhiata all'interfaccia utente di jQuery : jqueryui.com/demos/dialog/#modal-confirmation
jAndy


3
$ .alerts.okButton = 'Sì'; $ .alerts.cancelButton = 'No'; jConfirm ('Are you sure ??', '', function (r) {if (r == true) {// Ok button premuto ...}}
Sushanth CS

2
Un'altra soluzione di dialogo JQuery più simile a una funzione confirm () che restituisce: stackoverflow.com/a/18474005/1876355 Spero che questo aiuti
Pierre

Risposte:


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>


2
è questo jquery-ui o semplicemente vecchio jquery? Non vedo .dialog () da nessuna parte nella documentaiton di jQuery.
chovy

11
Devi includere jquery e script ui jquery nella tua pagina.
Thulasiram

@Thulasiram come posso aggiungere il plugin nel yii2framework?
Faisal

113

Il metodo di avviso blocca l'esecuzione fino a quando l'utente non lo chiude:

utilizzare la funzione di conferma:

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

3
confirmè "OK ANNULLA", non "SÌ NO".
KlaymenDK

57

Ho usato questi codici:

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>

Questi codici funzionano per me, ma non sono davvero sicuro che sia corretto. Cosa ne pensi?


3
Questo funziona per meif(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
Faisal

Più breve return confirm("Are you sure you want to return this meter?")))
Павел Зорин


12

Tutti gli esempi che ho visto non sono riutilizzabili per diverse domande di tipo "sì / no". Stavo cercando qualcosa che mi permettesse di specificare una richiamata in modo da poter chiamare per qualsiasi situazione.

Quanto segue funziona bene per me:

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

Quindi lo chiamo così:

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

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

4

Ho avuto problemi a recuperare la risposta dalla finestra di dialogo, ma alla fine ho trovato una soluzione combinando la risposta da questa altra domanda : pulsanti sì e no invece di ok e annulla in conferma casella con parte del codice dalla finestra di dialogo di conferma modale

Questo è ciò che è stato suggerito per l'altra domanda:

Crea la tua casella di conferma:

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

Crea il tuo confirm()metodo:

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

Chiamalo con il tuo codice:

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

LE MIE MODIFICHE Ho ottimizzato quanto sopra in modo che invece di chiamare l' confirmBox.show() ho usato in confirmBox.dialog({...}) questo modo

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'altra modifica che ho apportato è stata creare il div confirmBox all'interno della funzione doConfirm, come ha fatto ThulasiRam nella sua risposta.


0

Avevo bisogno di applicare una traduzione ai pulsanti Ok e Annulla. Ho modificato il codice per escludere il testo dinamico (chiama la mia funzione di traduzione)


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

Prova questo ... È molto semplice basta usare la finestra di dialogo di conferma per l'avviso con SÌ | NO.

if (confirm ("Vuoi aggiornare?")) {Il tuo codice}


-3

Puoi riutilizzare la tua conferma:

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

2
Per favore, usa un inglese corretto ed evita abbreviazioni come "u". Inoltre, è meglio se puoi spiegare un po 'il tuo codice per illustrare ed educare l'OP, e perché pensi che la tua risposta sia migliore di qualsiasi altra postata in precedenza.
Davidmh
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.