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 WebsiteBasic 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