How to use sweetalert2 inside modal?

Question

i am using sweetalert2, the latest version of sweetalert, how can i call sweetalert inside a model? the alert shows up but it actually blocked by the modal, there is the result i get.

it actually blocked by the modal, anything i can do to make it front? thank you!

        swal({
        title: "Are you sure?",

        type: "warning",
        confirmButtonText:"Yes",
        confirmButtonColor:"#18a689",
        cancelButtonText:"No",
        showCancelButton: true,
        showLoaderOnConfirm: true
    }).then( function () {
        $.ajax({
            url: [[@{/jobDetails/remove}]],
        type: "POST",
            data:{jobId:id,masterId:masterListId},
        success: function (result) {
            if (result=="success"){
                refreshJobDetails(masterListId)
                reWriteMainTable();
            }
        },
        error: function (thrownError) {

        }
    });
    })

Answer 1

I believe your issue is about z-index CSS property.

The container of SweetAlert2 has z-index: 1060 by default. In order to increase it you will need something like this in your CSS styles:

.swal2-container {
  z-index: {X};
}

Where {X} is a number greater than z-index of another modal, e.g. 100000.