An awesome replacement for JavaScript's alert.
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="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:
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);
});
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:
If you want to contribute:
Fork the repo
Make sure you have Node, NPM and Gulp installed. When in the SweetAlert directory, run npm install
to install the dependencies. Then run gulp
while working to automatically minify the SCSS and JS-files.
Keep in min that SweetAlert uses Browserify in order to compile ES6-files. For easy debugging, make sure you reference the file dist/sweetalert-dev.js
instead of sweetalert.js
.
After you're done, make a pull request and wait for approval! :)
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.