Change title position in sweetalert popup and make inactive button sweetalert2

user_11157508 0
Viewed 1337

I have a sweetlalert popup like this below

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>

Right now, the text position is before the checkbox.

I want to ask, how can I change the position so the text and button confirm in sweetalert position is after the checkbox and inactive, then after checkbox is checked, the text and button is become active ?

Thank you

sweetalert2 javascript
1 Answers

you can achieve this by adding 3 css style rules in order to:

  • change the check-box position (via flex-flow:row-reverse)
  • the interaction/opacity
  • and the row order (via 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;
}

in your javascript you need to create a onclick event, which detects that the checkbox was clicked:

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>

note: here is a very helpful "cheatsheet" about CSS flexbox and here another graphical guide to flexbox

user_22754900
Related