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

Question

我有一个像下面这样的sweetlalert弹出窗口

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变为活动状态?

谢谢

Answer 1

您可以通过添加 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