#SweetAlert
An awesome replacement for JavaScript's alert.
#Usage
You can install SweetAlert through bower:
bower install sweetalert
Or through npm:
npm install sweetalert
Alternatively, download the package and reference the JavaScript and CSS files manually:
<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">
#Tutorial
The easiest way to get started is follow the SweetAlert tutorial on Ludu!
#Examples
The most basic message:
sweetAlert("Hello world!");
A message signaling an error:
sweetAlert("Oops...", "Something went wrong!", "error");
A warning message, with a function attached to the "Confirm"-button:
sweetAlert({
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:
sweerAlert({
title: "An input!",
text: 'Write something interesting:',
type: 'input',
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top"
}, function(inputValue){
console.log("You wrote", inputValue);
});
#Browser compatibility
SweetAlert works in all major browsers (yes, even IE). Some details:
- IE8: Works, but icons (checkmark, x-mark...) are hidden.
- IE9: Works, but icons are not animated.
- IE10+: Works!
- Safari 4+: Works!
- Firefox 3+: Works!
- Chrome 14+: Works!
- Opera 15+: Works!
#Contributing
If you want to contribute:
-
Fork the repo
-
Make sure you have Node, NPM and Gulp installed. When in the SweetAlert directory, run the command:
npm install
to install the dependencies. Then run gulp
while working to automatically minify the SCSS and JS-files.
- After you're done, make a pull request and wait for approval! :)
#Related projects