Oui ou Non boîte de confirmation en utilisant jQuery

Question

Je veux oui/non alertes à l'aide de jQuery, au lieu de ok/Annuler bouton:

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

Toutes les autres alternatives?

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

Veuillez trouver le Demo.

Answer 2

J'ai eu du mal à obtenir la réponse de retour de la boîte de dialogue, mais finalement est venu avec une solution en combinant la réponse de cette autre question display-yes-and-no-buttons-instead-of-ok-and-cancel-in-confirm-box avec une partie du code de la boîte de dialogue modale confirmation

C'est ce qui a été suggéré pour l'autre question:

Créer votre propre zone Confirmer:

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

Créer votre propre méthode 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(); 
} 

appeler par votre code:

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

MES CHANGEMENTS J'ai peaufiné ci-dessus de sorte qu'au lieu d'appeler confirmBox.show() j'ai utilisé confirmBox.dialog({...}) comme celui-ci

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 J'ai fait était de créer le confirmBox div dans la fonction doConfirm, comme ThulasiRam l'a fait dans sa réponse.

Answer 3

Tout l'exemple que j'ai vu n'est pas réutilisable 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 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 
); 

Answer 4

Jetez un oeil à ce plugin jQuery: jquery.confirm.

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

puis:

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

Cela affichera une fenêtre de confirmation avant de passer à la suite du lien.

Il y a une démo ici: http://myclabs.github.com/jquery.confirm/

Answer 5

La méthode bloque alerte exécution jusqu'à ce que l'utilisateur la ferme:

utiliser la fonction de confirmation:

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

Answer 6

Je l'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 ne fonctionne pour moi, mais je ne suis pas vraiment sûr si cela est approprié. Qu'est-ce que tu penses?

Answer 7

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

Answer 8

je devais appliquer une traduction aux boutons OK et Annuler. J'ai modifié le code excepter 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); 
 
    } 
 
});