SweetAlert - ボタンの色を変更する

Question

私は確認ボタンのようにキャンセルボタンの色を変更しようとしていますが、何らかの理由で機能しないようです。

（https://jsfiddle.net/x20ra1o1/を参照してください））

コードは、次のとおりです。

swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, cancelButtonColor: "#DD6B55", confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) {  swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else {  swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); 

Answer 1

あなたはこのSweetAlertのバージョンを使用している：https://github.com/t4t5/sweetalertとソースJSファイル（https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js）には、にそのようなパラメータはありませんキャンセルボタンの色を変更します。あなたが使用しているファイルで

、のparamsは、次のとおりとして、ここでは色が存在するキャンセルボタンを変更するオプションをhttps://github.com/limonte/sweetalert2：

var defaultParams = { 
    title: '', 
    text: '', 
    type: null, 
    allowOutsideClick: false, 
    showConfirmButton: true, 
    showCancelButton: false, 
    closeOnConfirm: true, 
    closeOnCancel: true, 
    confirmButtonText: 'OK', 
    confirmButtonColor: '#8CD4F5', 
    cancelButtonText: 'Cancel', 
    imageUrl: null, 
    imageSize: null, 
    timer: null, 
    customClass: '', 
    html: false, 
    animation: true, 
    allowEscapeKey: true, 
    inputType: 'text', 
    inputPlaceholder: '', 
    inputValue: '', 
    showLoaderOnConfirm: false 
}; 

は、私はあなたがSweetAlertのこのバージョンを使用するように提案することができます。

最初のJSファイルのソースコードを変更できますが、2番目のバージョンではすぐに使用できます。

ボタンの色を変更するためにCSSを使用するオプションは常にあります。しかし、JSを使用してカスタマイズ可能にしたい場合は、SweetAlert2を使用する方が良い方法です。

Answer 2

これを行うことのないdefault方法はありません。しかし、カスタムCSSでスタイルを上書きすることができます。..

チェックこのフィドル：https://jsfiddle.net/74agy8ew/1/

Answer 3

次のようにお試しください。

SweetAlert.swal({ 
         title: 'Thank you', 
         text: 'Thank you for using the quoting tool. Your Quote PDF has been downloaded. The quote has been sent to U.S. Legal for approval.', 
         type: 'warning', 
         confirmButtonText: 'Cancel', 
    confirmButtonColor: "#DD6B55"});