Examples use content of SweetAlert

content: For custom content, beyond just text and icons.

Example 1: use content allow input text

 

<!DOCTYPE html>

<html>

    <body>

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

        <p>Example Alert use content</p>

 

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

        <script>

            function run() {

               swal({

                  content: "input",

                }).then((input) => {

                   if (input) {

                     swal("Ok!",input, {

                     icon: "success",

                    });

                   } else {

                    swal("Fail", input);

                   }

              });

            }

        </script>

    </body>

</html>

 

 Result:

Input Hello world!

 

 

Click OK:

 

 

Example 2: use content allow input password

 

<!DOCTYPE html>

<html>

    <body>

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

        <p>Example Alert use content</p>

 

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

        <script>

            function run() {

               swal({

                content: {

                  element: "input",

                  attributes: {

                    placeholder: "Type your password",

                    type: "password",

                  },

                },

              }).then((input) => {

                if (input) {

                  swal("Ok!",input, {

                    icon: "success",

                  });

                } else {

                  swal("Fail", input);

                }

              });

             

            }

        </script>

    </body>

</html>

 

 Result:

 

 

Input password: 123456 and click OK:

 

 

Example 3: use content create input range bar

 

<!DOCTYPE html>

<html>

    <body>

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

        <p>Example Alert use content</p>

 

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

        <script>

            function run() {

              var slider = document.createElement("input");

              slider.type = "range";

 

              swal({

                content: slider,

              });

            }

        </script>

    </body>

</html>

 

 Result: