更改 sweetalert 弹出窗口中的标题位置并使按钮 sweetalert2 处于非活动状态

Question

我有一个像下面这样的甜蜜警报弹出窗口

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在checkbox之后不活动，然后checkbox被选中后，text 和 button 被激活 ?

谢谢

Answer 1

您可以通过添加 3 个 css 样式规则来实现此目的，以便：

更改复选框位置（通过 flex-flow:row-reverse）
interaction/opacity
和行顺序（通过 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 and here another graphical guide to flexbox

更改 sweetalert 弹出窗口中的标题位置并使按钮 sweetalert2 处于非活动状态

Change title position in sweetalert popup and make inactive button sweetalert2

javascript

sweetalert2