http://t4t5.github.io/sweetalert/, this address has a full demo.
More EXAMPLES
In these examples, we ' re using the shorthand function Swal to call Sweetalert.
A Basic Message
Try me!Swal ("Here ' s a message!")
A title with a text under
Try me!Swal ("It ' s pretty, isn ' t it?")
A Success message!
Try me!Swal ("You clicked the button!","Success")
A warning message, with a function attached to the "Confirm"-button ...
Try me!function () { Swal ("Success");});
Passing a parameter, you can execute the something else for "Cancel".
Try me!Swal ({title:"Is you sure?", Text:"You are not being able to recover this imaginary file!", type: "warning", showcancelbutton: true, confirmbuttoncolor : "#DD6B55", confirmbuttontext: "Yes, delete it!", Cancelbuttontext: "No, Cancel plx!", closeonconfirm: false, closeoncancel: false}, function (isconfirm) { if (isconfirm) { swal ( "deleted!", "Your imaginary file has been deleted.", "success"); } else { swal ( " Cancelled ", " Your imaginary file is safe:) ", " error ");  &NBSP});
A message with a custom icon
Try me!"Images/thumbs-up.jpg"});
An HTML message
Try me!true});
A message with Auto close timer
Try me!False});
A replacement for the "prompt" function
Try me!Swal ({title:"An input!", Text:"Write Something interesting:", type:"Input", Showcancelbutton:True, Closeonconfirm:false, animation: "Slide-from-top", inputplaceholder: "Write Something"}, function (inputvalue) { if (inputvalue === false) return Span class= "Val" >false; if (inputvalue === . Showinputerror ( "You need to write something!"); return Span class= "Val" >false } swal ( "nice!", span class= "str" > "you wrote:" + inputvalue, "success");
-
with a loader (for Ajax request for example)
Try me! swal ({ title: "Ajax Request Example", text: "Submit to run Ajax request", type: "info" Showcancelbutton: true, closeonconfirm: false, Showloaderonconfirm: true,}, function () { settimeout ( function () { swal ( "Ajax request finished!"); } 2000);
can also change the theme of sweetalert!
Try me!<rel=type="text/css"href="Dist/sweetalert.css" > <rel=type="text/ CSS "href="themes/twitter.css ">
DOWNLOAD & INSTALL
Method 1: Install through Bower:
$ Bower Install Sweetalert
Method 2: Install through NPM:
$ NPM Install Sweetalert
Method 3: Download the Sweetalert CSS and JavaScript files.
Download files
Initialize the plugin by referencing the necessary files:
<src="dist/sweetalert.min.js" ></script> <rel=type=href="dist/ Sweetalert.css ">
Call the Sweetalert-function after the page has loaded
CONFIGURATION
Here is the keys, the can use if you pass an object into Sweetalert:
Argument |
Default Value |
Description |
Title |
Null (required) |
The title of the modal. It can either is added to the object under the key "title" or passed as the first parameter of the function. |
Text |
Null |
A description for the modal. It can either is added to the object under the key "text" or passed as the second parameter of the function. |
Type |
Null |
The type of the modal. Sweetalert comes with 4 built-in types which would show a corresponding icon animation: "warning", "error ","success"and"info ". You can also set it as "input" to get a prompt modal. It can either is put in the object under the key "type" or passed as the third parameter of the function. |
Allowescapekey |
True |
If set to true, the user can dismiss the modal by pressing the Escape key. |
Customclass |
Null |
A custom CSS class for the modal. It can added to the object under the key "Customclass". |
Allowoutsideclick |
False |
If set to true, the user can dismiss the modal by clicking outside it. |
Showcancelbutton |
False |
If set to true, a "Cancel"-button is shown, which the user can click on to dismiss the modal. |
Showconfirmbutton |
True |
If set to false, the "ok/confirm"-button would be hidden. Make sure your set a timer or set Allowoutsideclick to True if using this, in order not to annoy the user. |
Confirmbuttontext |
"OK" |
Use the-the text on the "Confirm"-button. If Showcancelbutton is set as true, the Confirm button would automatically show "confirm" instead of "OK". |
Confirmbuttoncolor |
"#AEDEF4" |
Use the background color of the ' Confirm '-button (must be a HEX value). |
Cancelbuttontext |
"Cancel" |
Use the-the text on the "Cancel"-button. |
Closeonconfirm |
True |
Set to false if you want the modal to stay open even if the user presses the "Confirm"-button. This was especially useful if the function attached to the ' Confirm '-button is another sweetalert. |
Closeoncancel |
True |
Same as closeonconfirm, but for the Cancel button. |
ImageUrl |
Null |
ADD A customized icon for the modal. Should contain a string with the path to the image. |
ImageSize |
"80x80" |
If IMAGEURL is set, you can specify imageSize to describes how big are want the icon to being in PX. Pass in a string with the values separated by an "x". The first value is the width of the second is the height. |
Timer |
Null |
Auto Close timer of the modal. Set in MS (milliseconds). |
Html |
False |
If set to True, would not escape title and text parameters. (Set to False if your ' re worried about XSS attacks.) |
Animation |
True |
If set to false, the modal ' s animation would be disabled. Possible (String) values: pop (default when animation set to True), slide-from-top, slide-from-b Ottom |
InputType |
"Text" |
The type of the input field when using type: ' Input ' (this can is useful if you want users to type in Thei R password for example). |
Inputplaceholder |
Null |
When using the Input-type, you can specify a placeholder to the user. |
Inputvalue |
Null |
Specify a default text value, want your input to show when using type: "Input" |
Showloaderonconfirm |
False |
Set to true to disable the buttons and show this something is loading. |
METHODS
Sweetalert also comes with some simple methods so can call:
Function |
Example |
Description |
SetDefaults |
Swal.setdefaults ({confirmbuttoncolor: ' #0000 '}); |
If you end up using a lot of the same settings when calling Sweetalert, you can use SetDefaults at the start of your progr AM to set them once and for all! |
Close |
Swal.close (); |
Close the currently open Sweetalert programatically. |
Showinputerror |
Swal.showinputerror ("Invalid email!"); |
Show an error message after validating the input field, if the user's data is bad |
Enablebuttons, Disablebuttons |
Swal.disablebuttons (); |
Disable or enable the user to click on the Cancel and Confirm buttons. |
CONTRIBUTE
Sweetalert was created by Tristan Edwards, you can follow him on Twitter or dribbble for updates and other cool projects!
Feel free-to-fork sweetalert on GitHub If you had any features so want to add!
The perfect alternative to JavaScript alert and confirm------Sweetalert