2016-10-03 24 views
4

취소 버튼의 색상을 확인 버튼처럼 변경할 수 있지만 어떤 이유로 작동하지 않는 것 같습니다.SweetAlert - 버튼 색상 변경

CODE 임) (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"); } }); 
+1

는'cancelButtonColor'는 [이 API]에서 옵션을 선택하지 않습니다 (http://t4t5.github.io/sweetalert/) – chazsolo

+0

나는 문서에서 해당 옵션이 표시되지 않습니다. 어쩌면 지원되지 않을 수도 있습니다. 언제든지 CSS로 자신 만의 클래스를 만들 수 있습니다. –

+2

다음을 시도해보십시오 .... https://jsfiddle.net/x20ra1o1/2/ – Hackerman

답변

6

당신이 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 파일의 소스 코드를 수정할 수 있지만 두 번째 버전에서는 쉽게 사용할 수 있습니다.

버튼 색상을 수정하는 데 CSS를 사용할 수있는 옵션이 항상 있습니다. 그러나 JS를 사용하여 사용자 정의 할 수있게하려면 SweetAlert2를 사용하는 것이 더 좋습니다.

+0

다음은 SweetAlert에서 SweetAlert2 로의 간단한 마이그레이션 가이드입니다. https://github.com/limonte/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2 –

+0

대신 rgba (값)를 사용할 수 있습니까? –

+0

SWAL은 .confirm 및 .cancel과 같이 사용하지 않는 클래스를 추가합니다. 이는 스타일 시트에서 정의 할 수 있지만 SWAL (swal2를 사용하는지 확실하지 않음) 배경을 넣기 때문에 배경을! important로 설정해야합니다. 요소 스타일 속성에서 버튼의 색상을 직접 지정합니다. – Felype

1

이러는 전혀 default 방법이 없다. 그러나, 사용자 정의 CSS로 스타일을 재정의 할 수 있습니다 ..

확인이 바이올린 : https://jsfiddle.net/74agy8ew/1/

1

다음과 같이 시도 할 수 있습니다.

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