Sweet Alert2 is a responsive and editable open source pop-up library written in Javascript.
With its easy integration, design and functionality, it is actively used on many websites and is constantly updated and developed.
Sweetalert2 makes the job very easy for error and confirmation messages after a transaction on web pages, buttons in form fields or pop up messages after any event.
The browser’s default Javascript page pop up message is more primitive, as in the example below. The Sweet Alert2 pop-up message, on the other hand, is a more pleasing and eye-catching structure.
In order for the codes in the library to be activated, the script below must be added to the website.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
Or you can add CSS and JS codes separately with the scripts below.
CSS code to add between <head></head> tags:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">
Script code to be added to the page (Adding it to the bottom of the page will be advantageous in terms of site speed):
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.js"></script>
Just a pop up with a simple message.
Swal.fire('Any fool can use a computer')
Pop message with title and description text.
Swal.fire(
'Junior to Expert',
'juniortoexpert.com',
'success'
)
The icon on the pop-up that opens with the value entered in the ‘success’ field is determined. There are 5 different icon options as ‘success’, ‘error’, ‘warning’, ‘info’, ‘question’.
Type of message that contains a picture in a pop-up. The “imageURL” attribute indicates the link of the image, the “imageWidth” and “imageHeight” the width-height of the image, and the “imageAlt” the alt tag of the image.
Swal.fire({
title: 'Junior to Expert!',
text: 'juniortoexpert.com Sweet Alert2',
imageUrl: 'https://juniortoexpert.com/wp-content/uploads/juniortoexpert.jpeg',
imageWidth: 400,
imageHeight: 400,
imageAlt: 'Junior to Expert',
})
With the “position” value, the pop-up opened on the page can be placed in the specified position. Values that allow the pop-up window to be positioned on the page;
Swal.fire({
position: 'top-start',
icon: 'success',
title: 'Junior to Expert',
showConfirmButton: false,
timer: 1500
})
With the timer:
value, the duration of the pop-up window that opens can be determined. Since there is no need to close the window button because there is a timer, the button is disabled with the value showConfirmButton: false
.
The specified HTML setup can be placed in the pop-up window opened with the html:
value.
Swal.fire({
title: 'Junior to Expert',
icon: 'info',
html:
'Sweet Alert2 Javascript pop-up library ' +
'<a href="https://juniortoexpert.com">juniortoexpert.com</a>',
showCloseButton: true,
showCancelButton: true
})
Pop-up type that receives confirmation from the user for an action.
Swal.fire({
title: 'Are you sure?',
text: "You cannot undo this action!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'The file you approved has been deleted.',
'success'
)
}
})
Animation usage while pop-up window is opened and closed is provided with showClass
and hideClass
values.
Swal.fire({
title: 'Junior to Expert',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
})
Note: Animation works with Animate.css support, animation does not activate without adding Animate.css codes to the page.
The “icon:” property “success”, “error”, “warning”, “info”, “question” variables are used in the code field to specify icons as follows in pop-up messages.
Success
Error
Warning
Info
Question
Source: https://sweetalert2.github.io/