sweetalert 0,8,19,10,0,13,0,20 editorconfig travis-ci Bower gulp npm

A beautiful replacement for JavaScript's "alert"

2 years after MIT

SweetAlert Build Status

An awesome replacement for JavaScript's alert.

A success modal

See it in action!

Learn how to use it!

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="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

Tutorial

The easiest way to get started is follow the SweetAlert tutorial on Ludu!

Examples

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);
});

View more examples

Themes

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

Browser compatibility

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!

Contributing

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 mind 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! :)

Related projects

Related Repositories

bootstrap-sweetalert

bootstrap-sweetalert

:cake: A beautiful "replacement" for JavaScript's alert ...

SweetAlert-iOS

SweetAlert-iOS

Live animated Alert View for iOS written in Swift ...

ngSweetAlert

ngSweetAlert

AngularJS wrapper for SweetAlert ...

ng-sweet-alert

ng-sweet-alert

:loudspeaker: Sweetalert directive for angular js( angular sweetalert), without ...

angular-sweetalert

angular-sweetalert

An angular directive which expose sweetalert in angular way ...


Top Contributors

t4t5 green-arrow peterjosling nixta arthurvr connyay sushantdhiman chentsulin danrice01 epool Glennvd zzarcon mkoczka RobertoNovelo holmesal simonVansuyt lipis dasilvacontin carloscabral dpatou danreeves Aristona ecwyne jeffutter jeremylevy gaugejosh JulienG-EEC AlexKvazos markusboehme MathRobin

Dependencies

package version
dev babelify ^6.0.2
browserify ^9.0.8
glob ^5.0.3
gulp ^3.9.0
gulp-babel ^5.2.1
gulp-concat ^2.4.3
gulp-jshint ^1.9.0
gulp-minify-css ^0.3.13
gulp-qunit latest
gulp-rename ^1.2.0
gulp-sass ^2.0.1
gulp-uglify ^1.0.2
gulp-wrap ^0.11.0
path ^0.11.14
vinyl-buffer ^1.0.0
vinyl-source-stream ^1.1.0

Releases

-   v1.1.3 zip tar
-   v1.1.2 zip tar
-   v1.1.1 zip tar
-   v1.1.0 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   v1.0.0-beta zip tar
-   v0.5.0 zip tar
-   v0.4.2 zip tar
-   v0.4.1 zip tar
-   v0.4.0 zip tar
-   v0.3.3 zip tar
-   v0.3.2 zip tar
-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.1 zip tar
-   v0.2.0 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar
-   v0.0.2 zip tar
-   v0.0.1 zip tar