SweetAlert2

Use this premium notifications plugin to show modal prompts to your users

Getting started

You need to include the following javascript file before the end of the body tag:

<script src="@@path/vendor/sweetalert2/dist/sweetalert2.all.min.js"></script>

And you also need to include the following stylesheet before the end of the head tag:

<link type="text/css" href="@@path/vendor/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">

Example

Here’s a basic example of an informational modal that is being prompted when the following button is clicked:

<button class="btn btn-primary" id="basicAlert">Basic alert</button>

Javascript

To initialize the Sweet Alert 2 modal prompt you need to call the fire method of the Swal object:

document.getElementById('basicAlert').addEventListener('click', function () {
    Swal.fire(
        'Basic alert',
        'You clicked the button!'
    )
});

Alert type

The icon of the modal. SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation: warning, error, success, info, and question. It can either be put in the array under the key “icon” or passed as the third parameter of the function.

Here’s an example of error type of alert:

<button class="btn btn-danger" id="errorAlert">Error alert</button>

document.getElementById('errorAlert').addEventListener('click', function () {
    Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: 'Something went wrong!',
        footer: '<a href>Why do I have this issue?</a>'
    })
});

You can read more about the options for this plugin at the official Sweet Alert 2 Documentation.