Develop Reference

How do I change text color in SweetAlert2?

I want to change the 'title' color in SweetAlert2. How can I do that?
Thank you in advance
function CustomConfirm(title, message, type) {
return new Promise((resolve) => {
Swal.fire({
title: title,
text: message,
icon: type,
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6e7d88',
confirmButtonText: 'Yes',
cancelButtonText: "No"
}).then((result) => {
if (result.isConfirmed) {
resolve(true);
} else {
resolve(false);
}
});
});
}

Here is my final function:
Swal.fire({
title: "<h5 style='color:red'>" + title + "</h5>",
text: message,
icon: type,
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6e7d88',
confirmButtonText: 'Yes',
cancelButtonText: "No"
})

You can use customClass or showClass to get the CSS class for the popup and change the colors in a CSS file from there.
For example:
function CustomConfirm(title, message, type) {
return new Promise((resolve) => {
Swal.fire({
customClass : {
title: 'swal2-title'
}
title: title,
text: message,
...
Then in your CSS
.swal2-title {
color: red;
}

You can try add this code in a global CSS:
Swal.fire({
title: 'Testing Custom Styles',
html: 'Good Job',
icon: 'success'
})
.swal2-container.swal2-center>.swal2-popup{
background-color: #121212 !important;
}
.swal2-html-container, .swal2-title{
color: white !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11.4.8/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You need set the HTML param to TRUE and use your own style or class.
Swal.fire({
title: "HTML <h1 style='color:red'>Title</h1>",
html: true
})

How can I use then() in a queue of SweetAlert2 popups?

If I have a SweetAlert2 popup like this:
Swal.fire({
title: 'Warning',
icon: 'warning',
text: 'This is a warning',
confirmButtonText: 'Continue',
cancelButtonText: 'Back',
showCancelButton: true,
reverseButtons: true,
}).then((result) => {
if (result.value) {
// Do stuff
}
});
And instead of having it fire right away, I want to add it to a queue like this:
// Create array
swal_queue = [];
// Add popups to array
swal_queue.push({
title: 'Warning',
icon: 'warning',
text: 'This is a warning',
confirmButtonText: 'Continue',
cancelButtonText: 'Back',
showCancelButton: true,
reverseButtons: true,
});
p = Swal.queue(swal_queue);
p.then(function() {swal_queue = []});
How do I add the .then() code to the queue for that popup?

How can I display a confirmation alert before redirecting?

How can I display a swal fire alert before redirecting?
<a :href="`/public/project/sendalert/${project.id}`">{project.first_name+' '+project.last_name}} #click="Alert"</a></strong></span>
alert() {
window.Swal.fire({
title: 'Are you sure?',
text: "Are you sure?"
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'YES!',
})
},

1.click event should be put into the properties.
<a #click="Alert">{project.first_name+' '+project.last_name}}</a></strong></span>
2.execute the redirect on the confirm action.
alert() {
window.Swal.fire({
title: 'Are you sure?',
text: "Are you sure?",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'YES!',
}, function (isConfirm) {
if (isConfirm) {
location.href = "...";
}
});
}

Why are entries deleted in both cases?

Brief
Hello everyone! I'm starter in javascript. I use Laravel + DataTables in my project. Now I use sweetalert2 instead of default confirms javascript.
Code
Here I call my javascript method:
<a href="#" onclick="deleteData('.$contact->id.')" class="btn btn-danger btn-xs">
<i class="fa fa-trash"></i>
<span>Delete</span>
</a>
Here my javascript function:
function deleteData(id){
var csrf_token = $('meta[name="csrf-token"]').attr('content');
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
cancelButtonColor: '#d33',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then(function(){
$.ajax({
url: "{{url('contact')}}" + '/' + id,
type: "POST",
data: {'_method' : 'DELETE', '_token' : csrf_token},
success: function(data){
contacts.ajax.reload();
swal({
title: 'Success!',
text: 'Data has been deleted!',
type: 'success',
timer: '1500'
})
},
error: function(){
swal({
title: 'Oops...',
text: 'Something went wrong!',
type: 'error',
timer: '1500'
})
}
});
});
}
When I'll click to delete button:
Showing confirm model:
Then I'll click to cancel button. But after click to cancel button deleted data from database. And why are entries deleted in both cases?

You forgot to check the result of resolved promise:
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
cancelButtonColor: '#d33',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then(function(result){
if (result.value) {
// perform the AJAX request
}
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7"></script>
Related example from the official docs: https://sweetalert2.github.io/#dismiss-handle

Need return value from SweetAlert for confirm an action delete

I have a button for deleting one row
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
and using javascript dialog() for trigger link
<script>
function dialog() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
});
}
</script>
the problem is SweetAlert closed and data in row deleted without confirm

function dialog() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
cancelButtonText: 'Cancel',
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
}