个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在使用 sweetAlert2，我正在尝试使用 bootstrap 4 来设置按钮样式，设置属性:
buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'
它有效，但是当我在上面设置这些属性时，showLoaderOnConfirm 选项以非常难看的样式显示。
您可以查看以下示例:
重现步骤:
$(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 选项的样式...
最佳答案
来自官网的现场演示: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">关于javascript - 将 sweetalert2 与 bootstrap 4 结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42287895/
24
4
0
我可以将 inputType 设置为密码。支持哪些其他输入类型？ swal({ title: "Are you sure?",
我正在链接到这个 SweetAlert 库 https://unpkg.com/sweetalert/dist/sweetalert.min.js，当我在移动设备上显示警报时，它显示得非常小。我增加了
这可能是 ServiceNow 问题，但我添加了一个 Sweet Alert 来显示一个选择框，这样我就可以收集一个值以传递给下一条记录......但选择框没有显示，弹出窗口只是没有框或选项。我错过了
在 sweet alert 2 中，如何在输入中加载设置值我的甜蜜警报代码 swal({ title: 'Are you sure?', tex
我想替换 javascript confirm with sweetalert，在下面的代码片段中，但是我发现了两个限制，1) sweetalert 不会像 confirm 那样暂停执行，2) swe
我想问一下如何用图片更改sweetalert中的icon图片？ 我尝试用 assets 中的图像更改 Swal.fire 中的 icon 图像，但它不起作用 这是脚本 Swal.fire({
我正在使用 sweetAlert 进行对话框显示。在我的对话框中，我必须显示一个大字符串，中间有换行符。我的示例字符串如下: var str="Task1Name : Succ
我正在使用 Sweet Alert，当从 Sweet Alert 调用错误函数时，出现以下错误。当 php 文件的操作成功时，它就可以正常工作。如何解决这个问题呢？非常感谢 SweetAlert: M
我正在使用 SweetAlert，它在我的页面中使用此按钮运行良好: Title 但是我希望当有人进入页面时弹出该消息，而无需按按钮。 我必须做什么？ 谢谢 最佳答案 window.onload
我知道以前有人问过这个问题，但我似乎找不到答案，我想询问 sweetalert 在 sweetalert 包含服务中的组件中不起作用用于删除数据。 组件 Swal({ title: 'Are
我正在使用 sweetalert 显示数据列表(大数据)，然后允许用户从数据列表中进行选择。 sweetalert 的 HTML 是由后端生成的，但当我尝试打开此列表时，需要 10-15 秒的时间。
使用 SweetAlert 时，我在使用单引号时遇到问题，例如下面的代码有效 function test() { Swal.fire({ title: 'Are you sure?', te
您好，我正在使用 Sweet Alert 从我的网站中删除产品我想使用它有两个选项第一个是“确定”，第二个是“取消” 但是当我点击页面上的任何位置时，它会删除并且取消按钮不起作用 这是我的代码 $(
我有这个函数可以在用户按下删除然后再次按下确定后重置游戏。 function confirmReset() { swal({ title: "Are you sure yo
我目前正在使用 sweetalert2 从对话框中捕获用户的输入。我想在链接队列对话框中使用下拉菜单，但我似乎找不到在下拉列表中动态添加项目的方法。假设我想从 JSON 格式检索数据并将其放入下拉列表
我在 html 中使用以下代码 在该函数中，我检查错误并在发现错误时发出警报: function SveFrm(){ .... if (err > 0){ swal({ t
我正在使用 SweetAlert2，并且有一个选择列表。我的挑战是选择列表中的值是以编程方式添加的。当我的代码运行时，下拉列表具有正确的 NUMBER 个值，文本显示 [object Object]
我希望当用户尝试提交空表单时警报不会消失，相反它应该在同一警报中显示一些错误。我尝试执行 swal.showInputError("some error") 但它给出了一个错误它不是 有效的功能。我试
我正在使用 SweetAlert 的版本 1: https://github.com/errakeshpd/sweetalert-1 我的示例 ajax 代码如下，我保存用户数据的地方。 $.ajax
我正在使用 swal ( http://t4t5.github.io/sweetalert ) 在用户点击某些内容时从他们那里获取一些数据。然后我想从调用 swal 的函数中返回它。换句话说，对于下面
我是一名优秀的程序员,十分优秀！