如何解决更改 toastr 和 sweetalert 背景颜色的简单方法
我正在使用 toastr 和 sweetalert 向应用用户提供反馈。我正在尝试更改 toastr 和 sweetalert 背景颜色以适合我的应用程序主题,但找不到解决方案。有没有什么简单的方法可以改变这些主题,比如使用 Sass 编译 bootstrap 4 自定义颜色。
解决方法
您只需要Inspect
要更改的元素(鼠标右键)并覆盖其样式
function alertmeWarning() {
swal("Gotcha!","Pikachu was caught!","warning");
}
function alertmeError() {
swal("Gotcha!","error");
}
function alertmeSuccess() {
swal("Gotcha!","success");
}
function alertmeInfo() {
swal("Gotcha!","info");
}
function meEither() {
toastr.warning('My name is Inigo Montoya. You killed my father,prepare to die!')
toastr.success('Have fun storming the castle!','Miracle Max Says')
toastr.error('I do not think that word means what you think it means.','Inconceivable!')
}
/* Sweatalert */
/* Success */
/* outer ring */
.swal-icon--success__ring {
border: 4px solid rgba(194,26,90,0.2);
}
/* spin color */
.swal-icon--success {
border-color: rgb(62,16,226);
}
/* V color */
.swal-icon--success__line {
background-color: rgb(30,206,53);
}
/* Warning */
/* outer ring */
.swal-icon--warning {
border-color: #0ec579;
-webkit-animation: none;
animation: none;
}
/* ! */
.swal-icon--warning__body,.swal-icon--warning__dot {
background-color: #1816ac;
}
/* Error */
/* outer ring */
.swal-icon--error {
border-color: #19e645;
}
/* X */
.swal-icon--error__line {
background-color: #af13df;
}
/* Info */
/* outer ring */
.swal-icon--info {
border-color: #020404;
}
/* i */
.swal-icon--info:after,.swal-icon--info:before {
background-color: #d119c8;
}
/* Toastr */
.toast-success {
background-color: #d813c8 !important;
}
.toast-warning {
background-color: #357e45 !important;
}
.toast-error {
background-color: #3533a7 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<button onclick="alertmeWarning()">SweetAlert Warning</button>
<button onclick="alertmeError()">SweetAlert Error</button>
<button onclick="alertmeSuccess()">SweetAlert Success</button>
<button onclick="alertmeInfo()">SweetAlert Info</button>
<button onclick="meEither()">Toastr</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。