CODEWITHSUNDEEP
jquerybootstrap-modalsweetalertsweetalert2
Ly Double II
Ly Double II

Reputation: 129

How to use sweetalert2 inside modal?

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.result

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) {

        }
    });
    })

Upvotes: 4

Views: 39516

Answers (8)

Mahmoud
Mahmoud

Reputation: 11431

instead of adjusting the z-index, you can use the target property of sweetalert.

the default target is body, you can adjust it to target your modal.

Swal.fire({
            target: document.getElementById('form-modal'),

ref @mehmetyagci: https://github.com/sweetalert2/sweetalert2/issues/665#issuecomment-669755719

ref: https://sweetalert2.github.io/#target

Upvotes: 6

Muhammad Faiq
Muhammad Faiq

Reputation: 69

the easiest way is to create another small-size modal for confirmation purposes, on OK event, process the request else show a cancellation message..

You can shown a modal over another modal by using z-index, but the sweetalert is not recommended with the bootstrap Modal popup

Upvotes: 0

Daniel Paul
Daniel Paul

Reputation: 514

The solution is to bring the sweet alert modal on top using the z-index.

.swal-overlay {
    z-index: 100000000000 !important;
}

Just check the z-index of the modal and put the .sweet-overlay z-index property more than the modals value.

Upvotes: 1

hariom nagar
hariom nagar

Reputation: 410

its working for me in my ReactJs project

public/style.css

  .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  
  z-index: 11000;
}

public/index.html

<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />

Upvotes: 0

Mozhdeh Zarei
Mozhdeh Zarei

Reputation: 81

you just need to increase z-index of sweet alert , so you can add Css class globally with exactly the same name that swal use

i just done with this

.swal2-container {
  z-index: 20000 !important;
}

Upvotes: 8

Flash Noob
Flash Noob

Reputation: 500

if anyone still has this issue try using this snippet. this solved my issue.

:host   ::ng-deep .swal2-container {
    z-index: 300000 !important;}

Upvotes: 0

UrielElias
UrielElias

Reputation: 11

This helped me:

::ng-deep.swal2-container {
    z-index: 1000000;
}

Upvotes: 1

Limon Monte
Limon Monte

Reputation: 54389

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.

Upvotes: 18

Related Questions