How to use sweetalert2 inside modal?
Solution 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
.
Solution 2
This helped me:
::ng-deep.swal2-container {
z-index: 1000000;
}
Solution 3
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 modal and put the .sweet-overlay
z-index
property more than the modals value.
Solution 4
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;
}
Ly Double II
Updated on June 28, 2022Comments
-
Ly Double II almost 2 years
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) { } }); })
-
barryDev over 4 yearsIs there anyway to make the model itself get grayed out? Even if the
z-index
is more the model itself looks the same. I would like to have the model the base of the sweetalert -
Supakij almost 3 yearsIn my case, div.swal2-container { z-index: {x}; } solved the issue.