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!.

help

Examples

A basic message

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

A title with a text under

                                                    
<button id="swal-button2" class="waves-effect waves-light btn theme-bg">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="waves-effect waves-light btn theme-bg">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="waves-effect waves-light btn theme-bg">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,
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false,
            customClass: 'warning-msg-modal'
        },
        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="waves-effect waves-light btn theme-bg">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,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false,
            customClass: 'warning-msg-modal'
        },
        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="waves-effect waves-light btn theme-bg">Try Me!</button>
                                                    
                                                
                                                    
$('#swal-button6').on('click', function() {
    swal({
        title: "Sweet!",
        text: "Here's a custom image.",
        imageUrl: "../asset/images/thumbs-up.jpg"
    });
});
                                                    
                                                

An HTML message

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

A message with auto close timer

                                                    
<button id="swal-button8" class="waves-effect waves-light btn theme-bg">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="waves-effect waves-light btn theme-bg">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="waves-effect waves-light btn theme-bg">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);
        });
});