在引导4中使用sweetalert2
在引导4中使用sweetalert2
提问于 2017-02-17 01:40:20
我使用sweetAlert2，并试图使用引导4样式按钮，设置属性：
buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'但是，当我在上面设置这些属性时，showLoaderOnConfirm选项会以非常难看的样式显示。
您可以查看下面的示例：
复制步骤：
- 输入有效的电子邮件；
- 新闻提交；
- 请参阅第一个加载程序(样式)(即使用bs4，而对于第二个加载器，使用swal2的默认样式)。
$(function() {
$('#button').click(() => {
swal({
title: 'Submit email to run ajax request',
input: 'email',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg',
preConfirm: function(email) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
if (email === 'taken@example.com') {
reject('This email is already taken.')
} else {
resolve()
}
}, 2000)
})
},
allowOutsideClick: false
}).then(function(email) {
swal({
type: 'success',
title: 'Ajax request finished!',
html: 'Submitted email: ' + email
})
}).catch(swal.noop)
});
$('#button1').click(() => {
swal({
title: 'Submit email to run ajax request',
input: 'email',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
preConfirm: function(email) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
if (email === 'taken@example.com') {
reject('This email is already taken.')
} else {
resolve()
}
}, 2000)
})
},
allowOutsideClick: false
}).then(function(email) {
swal({
type: 'success',
title: 'Ajax request finished!',
html: 'Submitted email: ' + email
})
}).catch(swal.noop)
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.css" />
</head>
<body>
<button id="button">Show (Bootstrap)</button>
<hr />
<button id="button1">Show (w/o bootstrap)</button>
</body>
</html>
问题是:如何让加载程序的默认样式(使用bs4)？或者定制showLoaderOnConfirm选项的样式.
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-17 07:42:41
官方网站的现场演示：https://sweetalert2.github.io/recipe-gallery/bootstrap.html
Swal.fire({
title: 'SweetAlert2 + Bootstrap 4',
input: 'text',
buttonsStyling: false,
showCancelButton: true,
customClass: {
confirmButton: 'btn btn-primary btn-lg',
cancelButton: 'btn btn-danger btn-lg',
loader: 'custom-loader'
},
loaderHtml: '<div class="spinner-border text-primary"></div>',
preConfirm: () => {
Swal.showLoading()
return new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, 5000)
})
}
}).btn {
margin: 0 6px;
}
.custom-loader {
animation: none !important;
border-width: 0 !important;
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.css">
Stack Overflow用户
发布于 2017-09-01 15:50:12
如果模式没有显示，只需添加到您的CSS：
<style>
.swal2-container.fade {
opacity: 1
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42287895
复制相关文章
相似问题
腾讯云开发者
