在 bootstrap 4 中使用 sweetalert2
[英]Using sweetalert2 with bootstrap 4
问题描述
I'm using sweetAlert2 and I'm trying to use bootstrap 4 to style buttons, setting the properties:
我正在使用 sweetAlert2 并且我正在尝试使用 bootstrap 4 来设置按钮样式，设置属性：
buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'
It works, however the showLoaderOnConfirm option is being shown in a very ugly style when I set those properties above.它有效，但是当我在上面设置这些属性时， showLoaderOnConfirm选项以非常难看的样式显示。
You can check the examples below:您可以查看以下示例：
Steps to reproduce:重现步骤：
- Input a valid email;输入有效的电子邮件；
- Press Submit ;按提交;
- See the loader (style) for the first (that's using bs4 and for the second, with the default style from swal2).请参阅第一个（使用 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>
The question is: How can I let the default style for the loader (using bs4)?问题是：如何让加载器使用默认样式（使用 bs4）？ Or maybe customize the style for the showLoaderOnConfirm option...或者可以自定义showLoaderOnConfirm选项的样式...
2 个解决方案
解决方案1
4 已采纳 2017-02-17 07:42:41
Live demo from the official website: https://sweetalert2.github.io/recipe-gallery/bootstrap.html官网现场演示： 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">
解决方案2
0 2017-09-01 15:50:12
If the modal don't show, just add to your CSS:如果模态没有显示，只需添加到您的 CSS：
<style>
.swal2-container.fade {
opacity: 1
}
</style>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.