2015-08-14 26 views
6

Sto tentando di aggiungere il pulsante di opzione nella finestra di dialogo utilizzando l'avviso dolce ma non riesco a farlo. In seguito è il codice: foglio di stileCome aggiungere input HTML in allerta dolce?

swal({ 
     title: "<small>Please select an reason to cancel this job !</small>", 
     type: "warning", 
     text:"<input type=\"radio\" name=\"reason\" value=\"male\">Reason 1<br><input type=\"radio\" name=\"reason\" value=\"female\">Reason 2<br><input type=\"radio\" name=\"reason\" value=\"female\">Other Reason", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes", 
     cancelButtonText: "No", 
     closeOnConfirm: false, 
     closeOnCancel: false, 
     html: true 
    }, 
      function(isConfirm){ 
       if (isConfirm) { 
        swal("Result !","Job cancelled successfully."); 
       } else { 
        swal("Cancelled !", "Process aborted"); 
       } 
      }); 
+0

Che errore stai ricevendo? Ulteriori informazioni sono utili quando si inviano domande. Consulta la [Come chiedere la pagina] (http://stackoverflow.com/help/how-to-ask) per un aiuto nel migliorare le tue domande. – Madness

risposta

4

di sweetalert di default nasconde tutti i campi di input di allarmi, in modo da avere per ripristinare i valori iniziali:

.sweet-alert input { 
    display: initial; 
    width: auto; 
    height: auto; 
    margin: auto; 
} 
+0

dove ho bisogno di aggiungere questo? nel mio file css o sweetalert.css? – b22

+0

Dipende da te. A meno che non si ottenga sweetalert.css da CDN, si può semplicemente sostituire la regola in ".sweet-alert input" da 'display: none;' per 'display: inline-block;'. –

+0

conosci questo errore se sì, per favore potresti aiutarmi. http://stackoverflow.com/questions/32070945/facing-error-while-using-sweet-alerts-in-ie-11 – b22

4

SweetAlert2 supporta ingressi di radio, fuori dalla scatola: https://limonte.github.io/sweetalert2/#radio-inputs

swal({ 
    title: 'Select color', 
    input: 'radio', 
    inputOptions: { 
    '#ff0000': 'Red', 
    '#00ff00': 'Green', 
    '#0000ff': 'Blue' 
    }, 

    // validator is optional 
    inputValidator: function(result) { 
    return new Promise(function(resolve, reject) { 
     if (result) { 
     resolve(); 
     } else { 
     reject('You need to select something!'); 
     } 
    }); 
    } 
}).then(function(result) { 
    if (result) { 
    swal({ 
     type: 'success', 
     html: 'You selected: ' + result 
    }); 
    } 
}) 
Problemi correlati