Custom Javascript Alerts - Sweetalert 2

SweetAlert 2 is beautiful replacement for javascript alert. SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!

Page Demo Plugin Website

Basic example

Basic textual message alert with least options.

$('#sa-basic').click(function(){
    swal({
        title: "Here's a message!",
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-sm btn-light',
        background: 'rgba(0, 0, 0, 0.1)'
    })
});

Variants

Alerts can be customized to display custom variants using optional settings.

$('#sa-variant').click(function(){
    swal({
        title: 'Good job!',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis',
        type: 'success', // 'success', 'info', 'warning', 'question'
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-sm btn-light',
        background: 'rgba(0, 0, 0, 0.96)'
    })
});

Requirements:

  • /scss/inc/vendor-overrides/_sweetalert2.scss
  • /vendors/sweetalert2/sweetalert2.min.css
  • /vendors/sweetalert2/sweetalert2.min.js