Get new jQuery plugins just once a week

×

sweetalert

FavoriteLoadingAdd to favorites

October 10, 2014

A beautiful replacement for JavaScript’s “alert”

sweetalert is a javascript library to beautifully replace the default Javascript alert.
This plugin automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet.

Example Code:

$(document).ready(function() {
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
});

Created by Tristan Edwards

Download

Example

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:

Contributing

If you want to contribute:

Related projects

sweetalert

Related posts:

Boxer
Ion Zoom
VenoBox

To install using Bower
bower install sweetalert

sweetAlert jQuery plugin

http://jquer.in/wp-content/uploads/2014/10/sweetAlert.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever