1
Я использую sweetAlert2, и я пытаюсь использовать самозагрузки 4 кнопкам типа, устанавливая свойство:Использование 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 === '[email protected]') {
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 === '[email protected]') {
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 ...
Спасибо за ваш ответ :) –