2015-08-14 12 views
6

Güzel uyarı kullanarak iletişim kutusuna radyo düğmesi eklemeye çalışıyorum ancak yapamıyorum. Aşağıdaki kodu:HTML girişi tatlı uyarıya nasıl eklenir?

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

Hangi hatayı alıyorsunuz? Sorular gönderirken daha fazla bilgi yardımcı olur. Sorularınızı iyileştirme konusunda yardım için [Nasıl yapılır?] Sayfasına (http://stackoverflow.com/help/how-to-ask) bakın. – Madness

cevap

4

Standart sweetalert en stil uyarılarında tüm giriş alanlarını gizler, bu nedenle ilk değerlerini geri yüklemek zorunda: kutudan

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

bunu eklemek zorundayım? css dosyasına veya sweetalert.css içine? – b22

+0

Bu size bağlı. Sweetalert.css dosyasını CDN'den almadıkça, '.sweet-alert input' içindeki kuralı 'display: none; '' 'display: inline-block;' olarak değiştirebilirsiniz. –

+0

Eğer bu hatadan haberiniz evet ise lütfen bana yardımcı olabilir misiniz? http://stackoverflow.com/questions/32070945/facing-error-while-using-sweet-alerts-in-ie-11 – b22

4

SweetAlert2 destekler radyo girişler: 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 
    }); 
    } 
}) 
İlgili konular