The alert system uses the same style than all the other components in the template. It uses SweetAlert, a beautiful replacement for JavaScript's 'Alert'.
SweetAlert was created by Tristan Edwards 漏
More information at http://t4t5.github.io/sweetalert/
Default alert example. By default alerts takes the Theme color schema.
Source example:swal("Here's a message!")
Click on 'Try me!' button to see this example:
Bootstrap colors styled alerts
CSS Classes:.swal-default, .swal-primary, .swal-info, .swal-success, .swal-warning, .swal-dangeror .swal-inverse
swal({ title: "Bootstrap colors!", text: "Success bootstrap color style for SweetAlert!", confirmButtonText: "Cool!", customClass: "swal-success" });
Click on 'Try me!' button to see this example:
Theme color alerts. By default alerts take the Theme color.
Source example:swal({ title: "Theme colors!", text: "Theme colors styled alerts for SweetAlert!", confirmButtonText: "Cool!" });
Change theme and click on 'Try me!' button to see how alert changes:
A message with auto close timer
Source example:swal({ title: "Auto close alert!", text: "I will close in 2 seconds.", timer: 2000, showConfirmButton: false });
Click on 'Try me!' button to see this example:
A warning message, with a function attached to the "Confirm"-button...
Source example:swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55 !important", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
Click on 'Try me!' button to see this example:
A replacement for the "prompt" function
Source example:swal({ title: "An input!", text: "Write something interesting:", type: "input", showCancelButton: true, closeOnConfirm: false, animation: "slide-from-top", inputPlaceholder: "Write something" }, function(inputValue){ if(inputValue ===false) returnfalse; if(inputValue ==="") { swal.showInputError("You need to write something!"); returnfalse } swal("Nice!", "You wrote: "+ inputValue, "success"); });
Click on 'Try me!' button to see this example:
Transparent alert.
CSS Classes:.swal-transparent
swal({ title: "Transparent alert!", text: "Transparent alert style for SweetAlert!", confirmButtonText: "Cool!", customClass: "swal-transparent" });
Click on 'Try me!' button to see this example:
Bootstrap colors styled alerts full color.
CSS Classes:.swal-full
swal({ title: "Bootstrap full colors!", text: "Success bootstrap full color style for SweetAlert!", confirmButtonText: "Cool!", customClass: "swal-success swal-full" });
Click on 'Try me!' button to see this example:
Alert full color with Theme color.
CSS Classes:.swal-full
swal({ title: "Theme full colors!", text: "Theme full colors styled alerts for SweetAlert!", confirmButtonText: "Cool!" customClass: "swal-full" });
Change theme and click 'Try me!' button to see how alert changes:
A success message alert.
Source example:swal("Good job!", "You clicked the button!", "success")
Click on 'Try me!' button to see this example:
Warning message by passing a parameter, you can execute something else for "Cancel".
Source example:swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55 !important", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if(isConfirm) { swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else{ swal("Cancelled", "Your imaginary file is safe :)", "error"); } });
Click on 'Try me!' button to see this example:
An HTML message
Source example:swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true });
Click on 'Try me!' button to see this example: