Ja oder Nein Bestätigungsfeld mit jQuery

Ich möchte Ja / Nein-Warnungen mit jQuery anstelle der Schaltfläche OK / Abbrechen:

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

Irgendwelche anderen Alternativen?

Die Alert-Methode blockiert die Ausführung, bis der Benutzer sie schließt:

Verwenden Sie die Bestätigungsfunktion:

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

Ich habe diese Codes verwendet:

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>

Diese Codes funktionieren für mich, aber ich bin mir nicht sicher, ob dies richtig ist. Was denken Sie?

Schauen Sie sich dieses jQuery-Plugin an: jquery.confirm .

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

und dann:

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

Daraufhin wird ein Bestätigungs-Popup angezeigt, bevor Sie dem Link folgen.

Hier gibt es eine Demo: http://myclabs.github.com/jquery.confirm/

Alle Beispiele, die ich gesehen habe, können nicht für verschiedene Fragen vom Typ "Ja / Nein" wiederverwendet werden. Ich suchte nach etwas, mit dem ich einen Rückruf angeben konnte, damit ich für jede Situation anrufen konnte.

Folgendes funktioniert gut für mich:

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

Ich nenne es dann so:

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

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

Ich hatte Probleme, die Antwort aus dem Dialogfeld zurückzugewinnen, fand aber schließlich eine Lösung, indem ich die Antwort aus dieser anderen Frage kombinierte: Ja-und-Nein-Schaltflächen anstelle von OK und Abbrechen bei Bestätigung. Feld mit einem Teil des Codes aus dem Dialogfeld zur Bestätigung des Modals

Dies wurde für die andere Frage vorgeschlagen:

Erstellen Sie Ihr eigenes Bestätigungsfeld:

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

Erstellen Sie Ihre eigene confirm()Methode:

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

Nennen Sie es mit Ihrem Code:

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

Meine Änderungen ich die oben gezwickt haben , so dass anstelle des Aufrufs confirmBox.show() ich verwendet confirmBox.dialog({...}) wie dieses

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

Die andere Änderung, die ich vorgenommen habe, war das Erstellen des Bestätigungsfelds div innerhalb der Funktion doConfirm, wie es ThulasiRam in seiner Antwort getan hat.

Ich musste eine Übersetzung auf die Schaltflächen OK und Abbrechen anwenden. Ich habe den Code so geändert, dass er keinen dynamischen Text enthält (ruft meine Übersetzungsfunktion auf).

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

Versuchen Sie dies ... Es ist sehr einfach, verwenden Sie einfach das Bestätigungsdialogfeld für die Warnung mit JA | NEIN.

if (bestätigen ("Möchten Sie ein Upgrade durchführen?")) {Ihr Code}

Sie können Ihre Bestätigung wiederverwenden:

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