An awesome replacement for JavaScript's alert.
You can install SweetAlert through bower:
bower install sweetalertOr through npm:
npm install sweetalertAlternatively, download the package and reference the JavaScript and CSS files manually:
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">Note: If you're using an older version than v1.0.0, the files are lib/sweet-alert.min.js and lib/sweet-alert.css
The easiest way to get started is follow the SweetAlert tutorial on Ludu!
The most basic message:
swal("Hello world!");A message signaling an error:
swal("Oops...", "Something went wrong!", "error");A warning message, with a function attached to the "Confirm"-button:
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
html: false
}, function(){
swal("Deleted!",
"Your imaginary file has been deleted.",
"success");
});A prompt modal where the user's input is logged:
swal({
title: "An input!",
text: 'Write something interesting:',
type: 'input',
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top"
}, function(inputValue){
console.log("You wrote", inputValue);
});Ajax request example:
swal({
title: 'Ajax request example',
text: 'Submit to run ajax request',
type: 'info',
showCancelButton: true,
closeOnConfirm: false,
disableButtonsOnConfirm: true,
confirmLoadingButtonColor: '#DD6B55'
}, function(inputValue){
setTimeout(function() {
swal('Ajax request finished!');
}, 2000);
});SweetAlert can easily be themed to fit your site's design. SweetAlert comes with three example themes that you can try out: facebook, twitter and google. They can be referenced right after the intial sweetalert-CSS:
<link rel="stylesheet" href="dist/sweetalert.css">
<link rel="stylesheet" href="themes/twitter/twitter.css">SweetAlert works in most major browsers (yes, even IE). Some details:
- IE8: (Dropped since v1.0.0-beta)
- IE9: Works, but icons are not animated.
- IE10+: Works!
- Safari 4+: Works!
- Firefox 3+: Works!
- Chrome 14+: Works!
- Opera 15+: Works!
If you want to contribute:
-
Fork the repo
-
Make sure you have Node, NPM and Gulp installed. When in the SweetAlert directory, run
npm installto install the dependencies. Then rungulpwhile working to automatically minify the SCSS and JS-files. -
Keep in mind that SweetAlert uses Browserify in order to compile ES6-files. For easy debugging, make sure you reference the file
dist/sweetalert-dev.jsinstead ofsweetalert.js. -
After you're done, make a pull request and wait for approval! :)