📜  Sweet Alert cdn (1)

📅  最后修改于: 2023-12-03 14:47:47.310000             🧑  作者: Mango

Sweet Alert CDN

Introduction

Sweet Alert is a beautiful and customizable replacement for JavaScript's native alert and confirm dialog boxes. With Sweet Alert CDN, you can easily add this library to your project without the need to download and host it yourself.

Key Features
  • Beautiful and modern dialog boxes with customizable styles and animations.
  • Provides multiple alert types such as info, warning, success, error, etc.
  • Allows you to customize title, text, buttons, and animations for each dialog box.
  • Lightweight library that does not require any additional dependencies.
  • Can be used with any JavaScript framework or library.
Getting Started

To start using Sweet Alert CDN, follow these simple steps:

  1. Add the following script tag to the head section of your HTML file:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
  1. Now you can use Sweet Alert in your JavaScript code. For example, to show a basic success alert with a custom message, use the following code:
Swal.fire({
  icon: 'success',
  title: 'Success!',
  text: 'Your action was successful.',
});
  1. Explore the Sweet Alert documentation to see all the available options and customization possibilities: Sweet Alert Documentation
Examples

Here are some examples to demonstrate the usage of Sweet Alert CDN:

  • Basic alert:

    Swal.fire('Hello World!');
    
  • Confirmation 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'
        )
      }
    })
    
  • Custom styles and animations:

    Swal.fire({
      title: 'Custom Alert',
      text: 'This is a custom alert with custom styles and animations.',
      icon: 'info',
      customClass: {
        container: 'my-swal-container',
        popup: 'my-swal-popup',
        title: 'my-swal-title',
        content: 'my-swal-content',
        confirmButton: 'my-swal-confirm-button',
      },
      showConfirmButton: true,
      animation: true,
    })
    
Conclusion

Sweet Alert CDN provides a convenient way to add beautiful and customizable alert and confirmation dialog boxes to your web applications. With its range of options and customization possibilities, you can enhance the user experience and make your alerts more visually appealing. Give it a try and make your applications stand out!