<tutorialjinni.com/>

Sweetalert2 Swal cdn link example

Posted Under: Alert Notification, JavaScript, Programming, Toast, Tutorials on Oct 15, 2024
Sweetalert2 Swal cdn link example
SweetAlert2, also known as "swal," is a customizable and responsive replacement for JavaScript's native popup boxes, designed to enhance user interactions with ease. It supports alerts, prompts, confirmations, and multi-step dialogs, all while being WAI-ARIA compliant for accessibility. With sleek design, flexible theming, and easy integration, SweetAlert2 allows developers to customize everything from buttons and icons to animations without compromising performance. As an actively maintained fork of SweetAlert, it ensures ongoing updates and improvements, making it ideal for developers who prioritize both functionality and aesthetics in their web projects.

In this tutorial, we'll go over how to use SweetAlert2 with some examples to help you get started quickly. First, include the SweetAlert2 CSS and JavaScript from CDN: 
<link rel="stylesheet" href="https://cdn.tutorialjinni.com/sweetalert2/11.14.3/sweetalert2.min.css">
<script src="https://cdn.tutorialjinni.com/sweetalert2/11.14.3/sweetalert2.all.min.js"></script>

Basic Alert

SweetAlert2 allows you to show a simple alert with a single line of code: 
Swal.fire('A Sweet alert!');
This creates a simple modal with the message

Alert With Title and Text

You can provide both a title and additional text to explain the alert: 
Swal.fire({
  title: 'Greetings!',
  text: 'This is a customizable SweetAlert2 dialog.'
});
Click to view the result

Success and Error Alerts

To display alerts with different icons (like success or error), you can add an icon parameter: 
// Success Alert
Swal.fire({
  title: 'Success!',
  text: 'Your operation was successful.',
  icon: 'success'
});

// Error Alert
Swal.fire({
  title: 'Error!',
  text: 'Something went wrong.',
  icon: 'error'
});
Click to view the result    

Confirmation Dialog

SweetAlert2 allows you to create confirmation dialogs that require user interaction: 
Swal.fire({
  title: 'Are you sure?',
  text: 'You wont be able to revert this!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    Swal.fire('Cancelled', 'Your file is safe :)', 'error');
  }
});
Click to view the result

Sweetalert2 With Input Forms

SweetAlert2 can also handle input fields, making it useful for prompts: 
Swal.fire({
  title: 'Enter your name',
  input: 'text',
  inputPlaceholder: 'Your name here...',
  showCancelButton: true,
}).then((result) => {
  if (result.value) {
    Swal.fire(`Hello, ${result.value}!`);
  }
});
Click to view the result

Sweetalert2 Toast Notifications

You can also create lightweight toast notifications that appear in the corner of the screen: 
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',// Set toast position here
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true
});

Toast.fire({
  icon: 'success',
  title: 'Signed in successfully'
});
In SweetAlert2, you can position toast notifications in different areas of the screen using the position option. Here are the possible toast notification positions:
  1. top-start: Top-left corner
  2. top-center: Top-center of the screen
  3. top-end: Top-right corner
  4. center-start: Left-center of the screen
  5. center: Center of the screen
  6. center-end: Right-center of the screen
  7. bottom-start: Bottom-left corner
  8. bottom-center: Bottom-center of the screen
  9. bottom-end: Bottom-right corner
You can change the position value to any of the 9 options mentioned above based on your needs. Click to view the result at top-end position

Sweetalert2 More Than Two Buttons

To add more than two buttons, you can customize the showDenyButton and showCancelButton properties, and even rename the button texts: 
Swal.fire({
  title: 'Choose your option',
  text: 'You can select from three options',
  icon: 'question',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: 'Yes',
  denyButtonText: 'No',
  cancelButtonText: 'Maybe'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('You selected Yes');
  } else if (result.isDenied) {
    Swal.fire('You selected No');
  } else {
    Swal.fire('You selected Maybe');
  }
});
Click to view the result

Sweetalert2 Remove the "OK" Button

If you want to remove the "OK" button and close the alert automatically, you can use the timer option: 
Swal.fire({
  title: 'Auto close alert',
  text: 'This alert will close automatically after 2 seconds',
  timer: 2000,
  showConfirmButton: false // This removes the "OK" button
});
Click to view the auto close alert

Multiple SweetAlert2 in the Same Function

To trigger multiple SweetAlert2 dialogs one after the other, simply call them sequentially, you can chain them with promises for better control: 
Swal.fire('First Alert').then(() => {
  Swal.fire('Second Alert');
}).then(() => {
  Swal.fire('Third Alert');
});
Click to view the results

Listening for When SweetAlert2 Closes

To listen for when the alert closes, you can use the willClose or didClose events: 
Swal.fire({
  title: 'This will close soon',
  timer: 3000, // auto-closes in 3 seconds
  didClose: () => {
    console.log('SweetAlert2 has closed');
  }
});
the didClose event is triggered after the alert closes, allowing you to run any custom code when that happens. Click to view the results , log will the generated in the console.


imgae