web-dev-qa-db-fra.com

comment afficher l'alerte de confirmation avec trois boutons «Oui» «Non» et «Annuler» comme il apparaît dans MS Word

J'affiche une boîte d'alerte de confirmation via JavaScript:

function checked() {
 if (hdnval.toLowerCase() != textbox1.toLowerCase()) {
  var save = window.confirm('valid')
   if (save == true) 
   {
     return true;
   }
   else
    {
      return false;
    }
 }
}

L'alerte de confirmation s'affiche avec deux boutons: OK et Annuler.

Je souhaite afficher un troisième bouton dans mon alerte de confirmation. Je veux que les trois boutons soient comme ceci: 'Oui' 'Non' 'Annuler', comme cela apparaît dans MS Word.

javascriptasp.net
29
Rocky

Cela ne peut pas être fait avec la boîte de dialogue javascript native, mais de nombreuses bibliothèques javascript incluent des boîtes de dialogue plus flexibles. Vous pouvez utiliser quelque chose comme boîte de dialogue de l'interface utilisateur jQuery pour cela.

Voir aussi ces questions très similaires:

Voici un exemple, comme démontré dans this jsFiddle :

<html><head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
</head>
<body>
    <a class="checked" href="http://www.google.com">Click here</a>
    <script type="text/javascript">

        $(function() {
            $('.checked').click(function(e) {
                e.preventDefault();
                var dialog = $('<p>Are you sure?</p>').dialog({
                    buttons: {
                        "Yes": function() {alert('you chose yes');},
                        "No":  function() {alert('you chose no');},
                        "Cancel":  function() {
                            alert('you chose cancel');
                            dialog.dialog('close');
                        }
                    }
                });
            });
        });

    </script>
</body><html>
39
StriplingWarrior

Si vous ne souhaitez pas utiliser une bibliothèque JS distincte pour créer un contrôle personnalisé pour cela, vous pouvez utiliser deux boîtes de dialogue confirm pour effectuer les vérifications:

if (confirm("Are you sure you want to quit?") ) {
    if (confirm("Save your work before leaving?") ) {
        // code here for save then leave (Yes)
    } else {
        //code here for no save but leave (No)
    }
} else {
    //code here for don't leave (Cancel)
}
27
David Millar