casilla Sí o No confirmar usando jQuery

Question

Quiero sí/No hay alertas utilizando jQuery, en lugar de botón OK/Cancelar:

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

otras alternativas?

Answer 1

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

Encuentra Demo.

Answer 2

tuve problemas para conseguir la respuesta de vuelta desde el cuadro de diálogo pero con el tiempo se le ocurrió una solución mediante la combinación de la respuesta a esta otra pregunta display-yes-and-no-buttons-instead-of-ok-and-cancel-in-confirm-box con parte del código del cuadro de diálogo modal de confirmación

Esto es lo que era sugerido para la otra pregunta:

Cree su propia caja de confirmar:

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

Cree su propio método 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(); 
} 

llamarlo por su código:

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

MIS CAMBIOS he retocado lo anterior de manera que en lugar de llamar confirmBox.show() que utiliza confirmBox.dialog({...}) como esto

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 Lo que hice fue crear el div de confirmBox dentro de la función doConfirm, como lo hizo ThulasiRam en su respuesta.

Answer 3

Todo el ejemplo que he visto no es reutilizable para diferentes preguntas tipo "sí/no". Estaba buscando algo que me permitiera especificar una devolución de llamada para poder llamar cualquier situación.

La siguiente está funcionando bien para mí:

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

que luego lo llaman así:

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

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

Answer 4

Tener un vistazo a este plugin jQuery: jquery.confirm.

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

y luego:

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

Esto le mostrará una ventana emergente de confirmación antes de proceder al siguiente enlace.

Hay una demo aquí: http://myclabs.github.com/jquery.confirm/

Answer 5

La alerta de ejecución de bloques del método hasta que el usuario lo cierra:

utilizar la función de confirmar:

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

Answer 6

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 funciona para mí, pero no estoy muy seguro de si esto es adecuado. ¿Qué piensas?

Answer 7

Puede volver a utilizar su confirma:

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

Answer 8

que tenía que aplicar una traslación a la botones Aceptar y Cancelar. He modificado el código para exceptuar de texto dinámico (llamadas 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); 
 
    } 
 
});