Example use option of SweetAlert

Example: Use 1 parameter with many option

 

<!DOCTYPE html>

<html>

    <body>

        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

        <p>Example Alert use option</p>

 

        <button onclick="run()">Run</button>

 

        <script>

            function run() {

                swal({

                    title: "Good job!",

                    text: "You clicked the button!",

                    icon: "success",

                    button: "OK baby!",

                  });

            }

        </script>

    </body>

</html>

 

Result:

 

 

- All config option:

 

Argument

Description

text

The modal text.

Ex: swal({

          text: "Hello world!"

        });

title

The model title

Ex: swal({

          title: "Here's a title!"

         });

icon

An icon for modal. 4 type icon: ”info”, ”error”, ”success”, “warning”

Ex: swal({

           icon: "success"

          });

button

The confirm button that's shown

Ex: swal({

           button: "OK baby"

          });

buttons

List confirm buttons that’s shown

Ex: swal({

          buttons: ["Stop", "Do it!"]

            });

content

custom content, beyond just text and icons.

Ex: swal({

           content: "input"

           });

className

Add a custom class to the SweetAlert modal

Ex: swal("Hello world!", {

              className: "red-bg"

             });

closeOnClickOutside

Decide close the modal if the user clicking outside

Ex: swal({

          closeOnClickOutside: false

          });

closeOnEsc

Decide close the modal if the user hitting the ESC key

Ex: swal({

           closeOnEsc: false

          });

dangerMode

If set to true, the confirm button turns red and the default focus is set on the cancel button instead.

Ex: swal("Are you sure?", {

                   dangerMode: true,

                   buttons: true,

                  });

timer

Closes the modal after a certain amount of time (specified in ms).

Ex:     swal("This modal will disappear soon!", {

                  buttons: false,

                  timer: 3000,

                 });