2012-02-01 5 views
23

che sto mostrando una finestra di avviso di conferma tramite JavaScript:come mostrare avviso di conferma con tre pulsanti 'Sì' 'No' e 'Annulla' quanto dimostra in MS Word

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

L'avviso di conferma sta mostrando con due pulsanti: OK e Annulla.

Desidero mostrare un terzo pulsante nell'avviso di conferma. Voglio che i tre pulsanti siano così: 'Sì' 'No' 'Annulla', come mostrato in MS Word.

+0

abbastanza sicuro che non hanno molte opzioni qui. Inoltre, come sarebbe "No" essere diverso da "Annulla"? –

+1

@BrianDriscoll: L'OP probabilmente vuole definire la logica personalizzata per "No". Ad esempio, l'utente fa clic su "Chiudi": il dialogo dice "Vuoi salvare il tuo lavoro prima di partire?" Sì: salva e chiudi, No: chiudi senza salvare, Annulla: lascia il lavoro aperto. – StriplingWarrior

+0

@Brian Driscoll: StriplingWarrior ha ragione, Sì indica Salva, No significa non salva e passa ad altra scheda, annulla significa non salva ma resta nella stessa pagina – Rocky

risposta

37

Questo non può essere fatto con la finestra di dialogo javascript nativa, ma molte librerie javascript includono finestre di dialogo più flessibili. Puoi usare qualcosa come la scatola jQuery UI's dialog per questo.

Vedi anche queste domande molto simili:

Ecco un esempio, come dimostrato in 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> 
+0

I non hai conoscenze in jQuery, ti prego di dare qualche demo in più. mostrare che potrei usare jquery e riuscire a sostituire il mio codice .. Per favore, – Rocky

+0

@Rocky: Se trovo il tempo, posso fornire un esempio di codice, ma la documentazione sia per jQuery che per la finestra di dialogo dell'interfaccia utente jQuery è abbastanza chiara. Controlla il codice sorgente per la pagina demo a cui mi sono collegato. Usa Google per trovare tutorial. Mi piace aiutare quando un paio di minuti di lavoro da parte mia ti faranno risparmiare ore di lavoro, ma non ho intenzione di fare tutto il lavoro per te. – StriplingWarrior

+0

@ StriplingWarrior: fornire un po 'di aiuto e codice di esempio sarebbe abbastanza per me, resto tutto quello che potrei fare se avrò qualche idea, e grazie mille per la tua risposta e ans. – Rocky

16

Se non si desidera utilizzare una bilancia JS separata ry per creare un controllo personalizzato per questo, è possibile utilizzare due confirm finestre di dialogo per fare i controlli:

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) 
} 
+2

Voglio mostrare tutti e tre i pulsanti contemporaneamente – Rocky

Problemi correlati