web-dev-qa-db-ja.com

SweetAlert-ボタンの色を変更

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

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 please!",
    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");
    }
});
javascriptsweetalert
11
compcobalt

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

使用したファイルでは、パラメーターは次のとおりです。

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を使用することをお勧めします。 https://github.com/limonte/sweetalert2 ここにあるように、キャンセルボタンの色を変更するオプションがあります。

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

CSSを使用してボタンの色を変更するためのオプションは常に利用可能です。しかし、JSを使用してカスタマイズできるようにしたい場合は、SweetAlert2がより良い代替手段です。

15
gurudeb

以下を試すことができます。

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"});
4
Jignesh Mesvaniya

スイートアラート1

CSSではこれを行うことができます：

.swal-button--confirm {
    background: #0a0;
}

.swal-button--cancel {
    background: #aaa;
}

.swal-button--danger {
    background: #a00;
}

クリックしたときにボタンを点滅させたくない場合は、これを追加します。

.swal-button--confirm:active {
    background: #0a0;
}

.swal-button--cancel:active {
    background: #aaa;
}

.swal-button--danger:active {
    background: #a00;
}

それが役立つことを願っています：D

4
Elias

これをcssに追加して、sweetalert2スタイルをオーバーライドします。

.swal2-styled.swal2-cancel{
  background-color: #dc3545 !important;
}
3
Rye

[更新=>ホバーオプション]

このバージョンを使用する人を助けるかもしれません https://sweetalert.js.org/guides/#installation

Javascript

swal({
    title: "Apakah anda yakin?",
    text: "Anda dapat mengaktifkannya lagi nanti...",
    icon: "warning",
    buttons: {
        confirm : {text:'Ubah',className:'sweet-warning'},
        cancel : 'Batalkan'
    },
}).then((will)=>{
    if(will){
        $(".onoffswitch-checkbox").prop('checked',false);
    }else{
        $("#all_petugas").click();
    }
});

CSS

...
.sweet-warning{
 background-color: black;
 #or anything you wanna do with the button
}

.sweet-warning:not([disabled]):hover{
 #hover here
}
...
3
Akbar Noto

カスタムの[キャンセル]ボタンを使用するには、「customClass」関数を使用してcssをビルドし、キャンセルボタンをターゲットにします。

JavaScript：

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

CSS：

.Custom_Cancel > .sa-button-container > .cancel {
   background-color: #DD6B55;
   border-color: #DD6B55;
}
.Custom_Cancel > .sa-button-container > .cancel:hover {
   background-color: #DD6B55;
   border-color: #DD6B55;
}
2
krisph

これを行うdefault方法はありません。ただし、カスタムcssでスタイルをオーバーライドできます。

このフィドルを確認してください： https://jsfiddle.net/74agy8ew/1/

1
Pranesh Ravi

SweetAlert2を使用する場合：

必要に応じて、SweetAlertからSweetAlert2に移行もできます。

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this! ⚠️",
  type: 'warning',
  showCancelButton: true,
  // Background color of the "Confirm"-button. The default color is #3085d6
  confirmButtonColor: 'LightSeaGreen',
  // Background color of the "Cancel"-button. The default color is #aaa
  cancelButtonColor: 'Crimson',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire({
      type: 'success',
      title: 'Deleted!',
      text: "Your file has been deleted.",
      timer: 2000,
      showCancelButton: false,
      showConfirmButton: false
    })
  }
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
0
Penny Liu