Sí o No confirme el cuadro usando jQuery


121

Quiero alertas de sí / no usando jQuery, en lugar del botón Aceptar / Cancelar:

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

¿Alguna otra alternativa?



Eche un vistazo a la interfaz de usuario de jQuery : jqueryui.com/demos/dialog/#modal-confirmation
jAndy


3
$ .alerts.okButton = 'Sí'; $ .alerts.cancelButton = 'No'; jConfirm ('¿Estás seguro?', '', function (r) {if (r == true) {// Botón Ok presionado ...}}
Sushanth CS

2
Otra solución de JQuery Dialog más como una función confirm () que devuelve: stackoverflow.com/a/18474005/1876355 Espero que esto ayude
Pierre

Respuestas:


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
¿Es esto jquery-ui o simple y antiguo jquery? No veo .dialog () en ninguna parte de la documentación de jQuery.
Chovy

11
Necesita incluir jquery y jquery ui script en su página.
Thulasiram

@Thulasiram ¿cómo puedo agregar el complemento en el yii2marco?
Faisal

113

El método de alerta bloquea la ejecución hasta que el usuario la cierra:

utilizar la función de confirmación:

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

3
confirmes "OK CANCEL" sin embargo, no "SÍ NO".
KlaymenDK

57

He usado estos códigos:

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>

Estos códigos funcionan para mí, pero no estoy realmente seguro de si es correcto. ¿Qué piensas?


3
Esto funciona para míif(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
Faisal

Más corto return confirm("Are you sure you want to return this meter?")))
Павел Зорин


12

Todos los ejemplos que he visto no son reutilizables para diferentes preguntas del tipo "sí / no". Estaba buscando algo que me permitiera especificar una devolución de llamada para poder llamar en cualquier situación.

Lo siguiente me está funcionando bien:

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

Luego lo llamo así:

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

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

4

Tuve problemas para recuperar la respuesta del cuadro de diálogo, pero finalmente encontré una solución combinando la respuesta de esta otra pregunta: mostrar botones de sí y no en lugar de aceptar y cancelar en la confirmación cuadro con parte del código del cuadro de diálogo de confirmación modal

Esto es lo que se sugirió para la otra pregunta:

Cree su propio cuadro de confirmación:

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

Crea tu propio confirm()método:

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

Llámalo por tu código:

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

MIS CAMBIOS He ajustado lo anterior para que en lugar de llamar confirmBox.show() use confirmBox.dialog({...}) así

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

El otro cambio que hice fue crear el div confirmBox dentro de la función doConfirm, como lo hizo ThulasiRam en su respuesta.


0

Necesitaba aplicar una traducción a los botones Aceptar y Cancelar. Modifiqué el código para excluir texto dinámico (llama a mi función de traducción)


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

Intente esto ... Es muy simple, solo use el cuadro de diálogo de confirmación para la alerta con SÍ | NO.

if (confirm ("¿Desea actualizar?")) {Su código}


-3

Puede reutilizar su confirmación:

    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
Por favor, use un inglés correcto y evite abreviaturas como "u". Además, es mejor si puede explicar un poco su código para ilustrar y educar al OP, y por qué cree que su respuesta es mejor que cualquiera de las publicadas anteriormente.
Davidmh
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.