SweetAlert

SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!.

Examples

A basic message

                        
<button id="swal-button1" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button1').on('click', function() {
    swal("Here's a message!");
});

A title with a text under

                        
<button id="swal-button2" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button2').on('click', function() {
    swal("Here's a message!", "It's pretty, isn't it?");
});

A success message!

                        
<button id="swal-button3" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button3').on('click', function() {
    swal("Good job!", "You clicked the button!", "success");
});

A warning message, with a function attached to the "Confirm"-button...

                        
<button id="swal-button4" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button4').on('click', function() {
    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
        },
        function(){
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    });
});

... and by passing a parameter, you can execute something else for "Cancel".

                        
<button id="swal-button5" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button5').on('click', function() {
    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!",
        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");
        }
    });
});

A message with a custom icon

                        
<button id="swal-button6" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button6').on('click', function() {
    swal({
        title: "Sweet!",
        text: "Here's a custom image.",
        imageUrl: "img/thumbs-up.jpg"
    });
});

An HTML message

                        
<button id="swal-button7" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button7').on('click', function() {
    swal({
        title: "HTML <small>Title</small>!",
        text: "A custom <span style='color:#F8BB86'>html<span> message.",
        html: true
    });
});

A message with auto close timer

                        
<button id="swal-button8" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button8').on('click', function() {
    swal({
        title: "Auto close alert!",
        text: "I will close in 2 seconds.",
        timer: 2000,
        showConfirmButton: false
    });
});

A replacement for the "prompt" function

                        
<button id="swal-button9" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button9').on('click', function() {
    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 false;
        
        if (inputValue === "") {
            swal.showInputError("You need to write something!");
            return false
        }
        
        swal("Nice!", "You wrote: " + inputValue, "success");
    });
});

With a loader (for AJAX request for example)

                        
<button id="swal-button10" class="btn default btn-message waves-effect waves-light">Try Me!</button>
                                
                            
                        
$('#swal-button10').on('click', function() {
    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);
    });
});