\ Minimal Sweetalert - RixetBD

Source Link

https://raw.githubusercontent.com/rixetbd/site-layout/main/alert/sweetalert2.min.css
https://raw.githubusercontent.com/rixetbd/site-layout/main/alert/sweetalert2.all.js

Or,

Download
01

Success Message

Swal.fire(
    'Good job!',
    'You clicked the button!',
    'success'
    )
02

A basic message

Swal.fire('Anyone can use a SweetAlert')
03

A title with a text under

Swal.fire(
  'The Internet?',
  'That thing is still around?',
  'question'
)
04

A modal with a title, an error icon, a text, and a footer

Swal.fire({
    icon: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: 'Why do I have this issue?'
})
05

Custom HTML description and buttons with ARIA labels

Swal.fire({
    title: 'HTML example',
    icon: 'info',
    html:
        'You can use bold text, ' +
        'links ' +
        'and other HTML tags',
    showCloseButton: true,
    showCancelButton: true,
    focusConfirm: false,
    confirmButtonText:
        ' Great!',
    confirmButtonAriaLabel: 'Thumbs up, great!',
    cancelButtonText:
        '',
    cancelButtonAriaLabel: 'Thumbs down'
})
06

A dialog with three buttons

Swal.fire({
    title: 'Do you want to save the changes?',
    showDenyButton: true,
    showCancelButton: true,
    confirmButtonText: 'Save',
    denyButtonText: `Don't save`,
    }).then((result) => {
    /* Read more about isConfirmed, isDenied below */
    if (result.isConfirmed) {
        Swal.fire('Saved!', '', 'success')
    } else if (result.isDenied) {
        Swal.fire('Changes are not saved', '', 'info')
    }
    })
07

A custom positioned dialog

Swal.fire({
    position: 'top-end',
    icon: 'success',
    title: 'Your work has been saved',
    showConfirmButton: false,
    timer: 1500
})
08

Custom animation with Animate.css

Swal.fire({
    title: 'Custom animation with Animate.css',
    showClass: {
        popup: 'animate__animated animate__fadeInDown'
    },
    hideClass: {
        popup: 'animate__animated animate__fadeOutUp'
    }
})
09

A confirm dialog, with a function attached to the "Confirm"-button

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'
        )
    }
})
10

... and by passing a parameter, you can execute something else for "Cancel"

const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
        confirmButton: 'btn btn-success',
        cancelButton: 'btn btn-danger'
    },
    buttonsStyling: false
    })
    
    swalWithBootstrapButtons.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, cancel!',
    reverseButtons: true
    }).then((result) => {
    if (result.isConfirmed) {
        swalWithBootstrapButtons.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
        )
    } else if (
        /* Read more about handling dismissals below */
        result.dismiss === Swal.DismissReason.cancel
    ) {
        swalWithBootstrapButtons.fire(
        'Cancelled',
        'Your imaginary file is safe :)',
        'error'
        )
    }
})
11

A message with a custom image

Swal.fire({
    title: 'Sweet!',
    text: 'Modal with a custom image.',
    imageUrl: 'https://unsplash.it/400/200',
    imageWidth: 400,
    imageHeight: 200,
    imageAlt: 'Custom image',
})
12

AJAX request example

Swal.fire({
    title: 'Submit your Github username',
    input: 'text',
    inputAttributes: {
        autocapitalize: 'off'
    },
    showCancelButton: true,
    confirmButtonText: 'Look up',
    showLoaderOnConfirm: true,
    preConfirm: (login) => {
        return fetch(`//api.github.com/users/${login}`)
        .then(response => {
            if (!response.ok) {
            throw new Error(response.statusText)
            }
            return response.json()
        })
        .catch(error => {
            Swal.showValidationMessage(
            `Request failed: ${error}`
            )
        })
    },
    allowOutsideClick: () => !Swal.isLoading()
    }).then((result) => {
    if (result.isConfirmed) {
        Swal.fire({
        title: `${result.value.login}'s avatar`,
        imageUrl: result.value.avatar_url
        })
    }
})