如何解决更改 sweetalert 弹出窗口中的标题位置并使按钮处于非活动状态 sweetalert2
Swal.fire({
icon: "warning",title: 'By deleting this thing,you will delete all data related',text: "Are you sure you want to delete this ?",input: 'checkBox',inputPlaceholder: 'I understand the consequenses',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',confirmButtonText: 'Yes',cancelButtonText: 'No',reverseButtons: true
}).then(function(result){
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
现在,text
位置在 checkBox
之前。
我想问一下,我怎样才能改变位置,使sweetalert位置的text
和button confirm
在复选框之后并且处于非活动状态,然后在复选框被选中后,text
和button
变得活跃?
谢谢
解决方法
您可以通过添加 3 条 css 样式规则来实现:
- 更改复选框位置(通过 flex-flow:row-reverse)
- 交互/不透明度
- 和行顺序(通过 flex-direction:column-reverse)
CSS:
.swal2-checkbox {
/* change the checkbox position */
flex-flow: row-reverse;
}
.swal2-actions {
pointer-events: none;
opacity: 0.4
}
.swal2-content {
/* change the row order */
flex-direction: column-reverse;
display: flex;
}
在你的javascript中 你需要创建一个 onclick 事件,它检测复选框被点击:
document.getElementById('swal2-checkbox').onclick=function(e){
sel= document.querySelector(".swal2-actions")
sel.style.pointerEvents='all'
sel.style.opacity=1
}
Swal.fire({
icon: "warning",title: 'By deleting this thing,you will delete all data related',text: "Are you sure you want to delete this ?",input: 'checkbox',inputPlaceholder: 'I understand the consequenses',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',confirmButtonText: 'Yes',cancelButtonText: 'No',reverseButtons: true
}).then(function(result){
})
document.getElementById('swal2-checkbox').onclick=function(e){
sel = document.querySelector(".swal2-actions")
sel.style.pointerEvents='all'
sel.style.opacity=1
}
.swal2-checkbox {
flex-flow: row-reverse;
}
.swal2-actions {
pointer-events: none;
opacity: 0.4
}
.swal2-content {
flex-direction: column-reverse;
display: flex;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
注意:这里是一个非常有用的 "cheatsheet" about CSS flexbox 和另一个 graphical guide to flexbox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。