Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!

We spend hours on Instagram and YouTube and waste money on coffee and fast food, but won’t spend 30 minutes a day learning skills to boost our careers.
Master in DevOps, SRE, DevSecOps & MLOps!

Learn from Guru Rajesh Kumar and double your salary in just one year.



Get Started Now!

How to use SweetAlert2

SweetAlert2 is a beautiful, responsive, and customizable replacement for JavaScript’s native alert, confirm, and prompt dialogs. It’s built to be flexible and easy to use, allowing developers to create visually appealing alert messages that seamlessly integrate into their web applications.

Why Choose SweetAlert2?

  1. Customization: SweetAlert2 provides extensive customization options, allowing developers to tailor alert messages to match their application’s design language perfectly.
  2. Responsive Design: The alerts generated by SweetAlert2 are responsive out of the box, ensuring a consistent user experience across devices and screen sizes.
  3. Ease of Use: Integrating SweetAlert2 into your project is straightforward, with clear and concise documentation available to guide you through the process.
  4. Animations: With built-in animations, SweetAlert2 adds flair to your alert messages, making them more engaging and visually appealing.

Integrating SweetAlert2 into your web application is a breeze. Here’s a quick guide to get you started:

  1. Installation: You can include SweetAlert2 in your project by adding the script tags directly to your HTML file or by installing it via package managers like npm or yarn.
<!-- Add this to your HTML file -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Basic Usage: Once included, you can use SweetAlert2 to display alerts, confirms, and prompts with just a few lines of code.

// Simple alert
Swal.fire('Hello, world!')

// Confirm dialog
Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Customization: SweetAlert2 allows you to customize every aspect of your alert messages, including titles, texts, icons, buttons, and animations. Refer to the documentation for a comprehensive list of customization options.

Example of how you can integrate SweetAlert2 into an HTML file to showcase its usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SweetAlert2 Example</title>
  <!-- Include SweetAlert2 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
  <h1>SweetAlert2 Example</h1>
  <button onclick="showAlert()">Show Alert</button>
  <button onclick="showConfirm()">Show Confirm</button>

  <!-- Include SweetAlert2 JS -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    // Function to show a simple alert
    function showAlert() {
      Swal.fire('Hello, world!');
    }

    // Function to show a confirm dialog
    function showConfirm() {
      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire(
            'Deleted!',
            'Your file has been deleted.',
            'success'
          )
        }
      })
    }
  </script>
</body>
</html>
  • We include the SweetAlert2 CSS file via a <link> tag in the <head> section.
  • We include the SweetAlert2 JavaScript file via a <script> tag just before the closing </body> tag.
  • Two buttons are provided to demonstrate the usage of SweetAlert2: one for showing a simple alert and another for showing a confirmation dialog.
  • JavaScript functions showAlert() and showConfirm() are defined to trigger the respective SweetAlert2 messages.

Related Posts

How We Fixed “sonar-scanner: command not found” and Successfully Analyzed Our Project with SonarQube

Running static code analysis with SonarQube is essential for maintaining clean, quality code. Recently, while working on our Laravel microservice project mhn-doctors-ms, we hit a common yet…

Is SonarQube Community free Edition Good for Laravel Projects?

When working on web development projects using Laravel, JavaScript, and jQuery, maintaining code quality becomes just as important as building features. That’s where tools like SonarQube come…

Laravel Throttle Middleware: How to Increase API Rate Limit Safely and for 429 Too Many Requests

If you’re working with Laravel APIs, you might have encountered this default throttle setting: This line lives in your app/Http/Kernel.php file and controls how many requests a…

Fixing MySQL Error: Incorrect Definition of mysql.column_stats Table

The Problem While working on your MySQL server, you might come across this error in your error log: This error usually shows up after an upgrade or…

Fixing Laravel Migration Error: “Unknown Collation: utf8mb4_0900_ai_ci”

While working with Laravel and MySQL, you might run into an error during migrations like this one: Why This Happens The collation utf8mb4_0900_ai_ci is introduced in MySQL…

Why Dental Surgery Is Good and Important

Dental health plays a vital role in our overall well-being, yet it’s often overlooked until problems become serious. Dental surgery is a powerful solution that not only…

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x