SweetAlert | CORK - Multipurpose Bootstrap Dashboard Template

Code

        
<button class="mr-2 btn btn-primary message">Basic message</button>

document.querySelector('.widget-content .message').addEventListener('click', function() {
    Swal.fire('Saved succesfully')
})

Code

        

<button class="mr-2 btn btn-primary timer">Message timer</button>



/**
*       Auto Timer
*/
document.querySelector('.widget-content .timer').addEventListener('click', function() {
    let timerInterval
    Swal.fire({
        title: 'Auto close alert!',
        html: 'I will close in <b></b> milliseconds.',
        timer: 2000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading()
            const b = Swal.getHtmlContainer().querySelector('b')
            timerInterval = setInterval(() => {
                b.textContent = Swal.getTimerLeft()
            }, 100)
        },
        willClose: () => {
            clearInterval(timerInterval)
        }
        }).then((result) => {
        /* Read more about handling dismissals below */
        if (result.dismiss === Swal.DismissReason.timer) {
            console.log('I was closed by the timer')
        }
    })
})

Code

        

<button class="mr-2 btn btn-success custom-image">Message with custom image</button>



/**
*     Message with custom image
*/
document.querySelector('.widget-content .custom-image').addEventListener('click', function() {
    Swal.fire({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: '../src/assets/img/sweet-alert.png',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
    })
})

Code

        

<button class="mr-2 btn btn-primary  warning confirm">Confirm</button>



/**
*     Warning message, with "Confirm" button
*/
document.querySelector('.widget-content .warning.confirm').addEventListener('click', function() {
    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'
            )
        }
    })
})

Code

        

<button class="mr-2 btn btn-secondary  warning cancel">Addition else for "Cancel".</button>



/**
*     Execute something else for "Cancel".
*/
const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
        confirmButton: 'btn btn-success',
        cancelButton: 'btn btn-danger'
    },
    buttonsStyling: false
})

document.querySelector('.widget-content .warning.cancel').addEventListener('click', function() {
    Swal.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'
            )
        }
    })
})

Code

        

<button class="mr-2 btn btn-primary  RTL">RTL</button>



/**
*     RTL Support
*/
document.querySelector('.widget-content .RTL').addEventListener('click', function() {
    Swal.fire({
        title: 'هل تريد الاستمرار؟',
        icon: 'question',
        iconHtml: '؟',
        confirmButtonText: 'نعم',
        cancelButtonText: 'لا',
        showCancelButton: true,
        showCloseButton: true
    })
})

Code

        

<button class="mr-2 btn btn-primary  mixin">Mixin</button>



/**
*     Mixin
*/
document.querySelector('.widget-content .mixin').addEventListener('click', function() {
    const Toast = Swal.mixin({
        toast: true,
        position: 'bottom-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    })
        
    Toast.fire({
        icon: 'success',
        title: 'Signed in successfully'
    })
})

Code

        

<!-- Default -->
<button class="btn btn-primary default mb-2 me-4">Default</button>
<!-- Top Left -->
<button class="btn btn-danger top-start mb-2 me-4">Top Left</button>
<!-- Top Right -->
<button class="btn btn-warning top-end mb-2 me-4">Top Right</button>
<!-- Bottom Left -->
<button class="btn btn-info bottom-start mb-2 me-4">Bottom Left</button>
<!-- Bottom Right -->
<button class="btn btn-secondary bottom-end  mb-2 me-4">Bottom Right</button>



/**
*     Placement
*/

// Center
document.querySelector('.widget-content .default').addEventListener('click', function() {
    Swal.fire({
        position: 'center',
        icon: 'success',
        title: 'Placement set at default (center)',
        showConfirmButton: false,
        timer: 1500
    })
})

// Top Start
document.querySelector('.widget-content .top-start').addEventListener('click', function() {
    Swal.fire({
        position: 'top-start',
        icon: 'success',
        title: 'Placement set at top left',
        showConfirmButton: false,
        timer: 1500
    })
})

// Top End
document.querySelector('.widget-content .top-end').addEventListener('click', function() {
    Swal.fire({
        position: 'top-end',
        icon: 'success',
        title: 'Placement set at top right',
        showConfirmButton: false,
        timer: 1500
    })
})

// Bottom Start
document.querySelector('.widget-content .bottom-start').addEventListener('click', function() {
    Swal.fire({
        position: 'bottom-start',
        icon: 'success',
        title: 'Placement set at bottom left',
        showConfirmButton: false,
        timer: 1500
    })
})

// Bottom End
document.querySelector('.widget-content .bottom-end').addEventListener('click', function() {
    Swal.fire({
        position: 'bottom-end',
        icon: 'success',
        title: 'Placement set at bottom right',
        showConfirmButton: false,
        timer: 1500
    })
})

Code

        

<!-- Success -->
<button class="mr-2 btn btn-success icon-success  mb-2 me-4">Success</button>
<!-- Error -->
<button class="mr-2 btn btn-danger icon-error  mb-2 me-4">Error</button>
<!-- Warning -->
<button class="mr-2 btn btn-warning icon-warning  mb-2 me-4">Warning</button>
<!-- Info -->
<button class="mr-2 btn btn-info icon-info  mb-2 me-4">Info</button>
<!-- Question -->
<button class="mr-2 btn btn-secondary icon-question  mb-2 me-4">Question</button>



/**
*     Icons Type
*/

// Succcess
document.querySelector('.widget-content .icon-success').addEventListener('click', function() {
    Swal.fire({
        icon: 'success',
        title: 'Icon Success',
    })
})

// Error
document.querySelector('.widget-content .icon-error').addEventListener('click', function() {
    Swal.fire({
        icon: 'error',
        title: 'Icon Error',
    })
})

// Warning
document.querySelector('.widget-content .icon-warning').addEventListener('click', function() {
    Swal.fire({
        icon: 'warning',
        title: 'Icon Warning',
    })
})

// Info
document.querySelector('.widget-content .icon-info').addEventListener('click', function() {
    Swal.fire({
        icon: 'info',
        title: 'Icon Info',
    })
})

// Question
document.querySelector('.widget-content .icon-question').addEventListener('click', function() {
    Swal.fire({
        icon: 'question',
        title: 'Icon Question',
    })
})

Basic message

Auto Timer

Message with custom image

Warning message, with "Confirm" button

Execute something else for "Cancel".

RTL Support

Mixin

Placement

Icons Type

Shaun Park

Need help?