2009-12-03 5 views
7

Comment puis-je y parvenir?Le moyen le plus simple de créer un message de confirmation avec jQuery/JavaScript?

  1. Un utilisateur clique sur le lien de suppression (avec une classe de "confirmation").
  2. Un message de confirmation apparaît demandant "Etes-vous sûr?" avec les options "Oui" et "Annuler".

Si oui est sélectionné, le lien continue comme cliqué, mais si annuler est sélectionné, l'action est annulée.

Mise à jour: Code de travail final avec confirm() grâce à this guy:

$('.confirm').click(function() { 
    return confirm("Are you sure you want to delete this?"); 
}); 
+0

avez-vous mis dans un $ (document) .ready() {}? – helloandre

+0

Oui, c'est dans mon document prêt. – Andrew

Répondre

17

Javascript fournit une boîte de dialogue de confirmation builtin.

if (confirm("Are you sure?")) 
{ 
    // continue with delete 
} 
+0

Vous donnera OK et annuler les options. –

+0

ne peut pas le battre pour la facilité. – nickf

+0

La réponse la plus simple est généralement la bonne :) – AntonioCS

0

J'ai implémenté avec succès la boîte de confirmation dans Jquery. assurez-vous que vous avez la bibliothèque Jquery et css INCLUS dans votre code avant d'essayer ceci (jquery-ui-1.8.16.custom.css, jquery-1.6.2.js, jquery-ui-1.8.16.custom.min. js). LA DIFFÉRENCE PRINCIPALE ENTRE LA BOÎTE DE CONFIRMATION JAVASCRIPT ET CETTE BOÎTE QUE NOUS CRÉONS EN UTILISANT DIV - EST QUE - LA CONFIRMATION JAVASCRIPT ATTENDRA L'ENTREE UTILISATEUR, APRES L'UTILISATEUR ENTRE OUI/NON, LA LIGNE SUIVANTE S'EXÉCUTERA, ICI VOUS DEVEZ FAIRE DANS OUI, OU NO BLOC - ** LA LIGNE PROCHAINE CODE APRÈS LA showConfirm() exécutera immédiatement * donc attention

/** add this div to your html 

*/

var $confirm; 
var callBack; 
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>'; 
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">'; 
var messageStyleEnd = '</span>'; 


$(document).ready(function(){ 
    $('#confirmDialog').dialog({ 
      autoOpen: false, 
      modal: true 
    }); 


    //jquery confirm box -- the general alert box 
    $confirm = $('<div style="vertical-align:middle;"></div>') 
    .html('This Message will be replaced!') 
    .dialog({ 
     autoOpen: false, 
     modal: true, 
     position: 'top', 
     height:300, 
     width: 460, 
     modal: true, 
     buttons: { 
      Ok : function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.success(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.fail(); 
      } 
     } 
    }); 

}); 

    function showConfirm(message,callBackMe,title){ 
    callBack = null; 
    $confirm.html(""); // work around 
    $confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd); 
    if(title =='undefined'|| null ==title) 
     $confirm.dialog("option", "title", "Please confirm"); 
    else 
     $confirm.dialog("option", "title", title); 
    var val = $confirm.dialog('open'); 
    callBack = callBackMe; 
    // prevent the default action 
    return true; 
} 

    // Now for calling the function 
// create a Javascript/jSOn callback object 

var callMeBack = { 
        success: function() 
          { // call your yes function here         
           clickedYes(); 
           return; 
          }, 
        fail: function(){ 
           // call your 'no' function here 
           clickedNo(); 
           return ; 
          } 
       }; 


    showConfirm("Do you want to Exit ?<br/>"+ 
        ,callMeBack1,"Please Answer"); 
1

dans mon expé C'est la façon la meilleure et la plus facile d'avoir une confirmation!

<a href="#" onclick="return myconfirm()">Confirm</a> 
<script> 
function myconfirm() 
{ 
    if(confirm('Are You Sure ...')) 
     return true; 
    return false; 
} 
</script> 
+1

un moyen encore plus simple serait d'utiliser la valeur de retour de la fonction confirm: 'onclick =" return confirm ('Are you sure?') "' – Andrew

Questions connexes