Example edit css with className of SweetAlert

SweetAlert support edit css for modal

Example 1 : edit backgroup of modal

 

<!DOCTYPE html>

<html>

    <head>

        <style>

            .swal-modal {

                background-color: rgba(63,255,106,0.69);

                border: 3px solid white;

            }

        </style>

    </head>

    <body>

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

        <p>Example Alert use className</p>

 

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

 

        <script>

            function run() {

                swal("Hello world!", {

                    className: "swal-modal"

                });

            }

        </script>

    </body>

</html>

 

 Result:

 

 

Example 2: Edit css title modal

 

<!DOCTYPE html>

<html>

    <head>

        <style>

            .swal-title {

              margin: 0px;

              font-size: 16px;

              box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);

              margin-bottom: 28px;

            }

        </style>

    </head>

    <body>

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

        <p>Example Alert use className </p>

 

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

 

        <script>

            function run() {

                swal("Sweet!", "I like customizing!", {

                    className: "swal-title"

                });

            }

        </script>

    </body>

</html>

 

Result:

 

 

 

Example 3: Edit css text modal

 

<!DOCTYPE html>

<html>

    <head>

        <style>

            .swal-text {

                background-color: #FEFAE3;

                padding: 17px;

                border: 1px solid #F0E1A1;

                display: block;

                margin: 22px;

                text-align: center;

                color: #61534e;

              }

        </style>

    </head>

    <body>

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

        <p>Example Alert use className</p>

 

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

 

        <script>

            function run() {

                swal("Sweet!", "I like customizing!", {

                    className: "swal-title"

                });

            }

        </script>

    </body>

</html>

 

Result:

 

 

Example 4: Edit css footer modal

 

<!DOCTYPE html>

<html>

    <head>

        <style>

            .swal-footer {

                background-color: rgb(245, 248, 250);

                margin-top: 32px;

                border-top: 1px solid #2D9B33;

                overflow: hidden;

              }

        </style>

    </head>

    <body>

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

        <p>Example Alert use className</p>

 

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

 

        <script>

            function run() {

                swal("Sweet!", "I like customizing!", {

                    className: "swal-title"

                });

            }

        </script>

    </body>

</html>

 

Result:

 

 

The modal's button(s). It has an extra class that changes depending on the button's type, in the format swal-button--{type}. The extra class for the confirm button for example is swal-button--confirm.

Example 5: Edit ccs button modal

 

<!DOCTYPE html>

<html>

    <head>

        <style>

            .swal-button {

              padding: 7px 19px;

              border-radius: 2px;

              background-color: #4962B3;

              font-size: 12px;

              border: 1px solid #3e549a;

              text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);

            }

        </style>

    </head>

    <body>

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

        <p>Example Alert use className</p>

 

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

 

        <script>

            function run() {

                swal("Sweet!", "I like customizing!", {

                    className: "swal-title"

                });

            }

        </script>

    </body>

</html>

 

Result: