Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

JavaScript - beautiful html alerts with Sweet Alert 2 - full code examples

0 contributions
5 points

1. Sweet Alert 2 - success alert example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
</head>
<body style="font-family: sans-serif; ">
  <div style="height: 500px;">
    <button onclick="fireSweetAlert()">Show sweet alert example</button>
  </div>
  <script>

    function fireSweetAlert() {
        Swal.fire(
            'Good job!',
            'You clicked the button!',
            'success'
        )
    }

  </script>
</body>
</html>

Screenshot with expected results:

Sweet Alert 2 - simple success alert

2. Sweet Alert 2 - info message example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
</head>
<body style="font-family: sans-serif; ">
<div style="height: 500px;">
    <button onclick="fireSweetAlert()">Show sweet alert example</button>
</div>
<script>

    function fireSweetAlert() {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'You clicked the button!'
        })
    }

</script>
</body>
</html>

Screenshot with expected results:

JavaScript - beautiful html alerts with Sweet Alert 2 - full code examples - info message
Sweet Alert 2 - simple info alert

3. Sweet Alert 2 - error message example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
</head>
<body style="font-family: sans-serif; ">
<div style="height: 500px;">
    <button onclick="fireSweetAlert()">Show sweet alert example</button>
</div>
<script>

    function fireSweetAlert() {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Something went wrong!'
        })
    }

</script>
</body>
</html>

Screenshot with expected results:

JavaScript - Sweet Alert 2 - simple error alert screenshot
Sweet Alert 2 - simple error alert

4. Sweet Alert 2 - five examples in one file

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    <style>
        .btn {
            margin: 10px;
        }
    </style>
</head>
<body style="font-family: sans-serif; ">
<div style="height: 500px;">

    <div class="btn"><button onclick="showSuccessAlert()">Show success</button></div>
    <div class="btn"><button onclick="fireInfoAlert()">Show info</button></div>
    <div class="btn"><button onclick="showError()">Show error</button></div>
    <div class="btn"><button onclick="showMessage()">Show message</button></div>

    <div class="btn">
        <button onclick="showAlertTopEnd()">
            Show alert in top right corner
        </button>
    </div>

    <div class="btn">
        <button onclick="showDialogWithPassingParams()">
            Show dialog with second alert on yes
        </button>
    </div>

</div>
<script>

    function showSuccessAlert() {
        Swal.fire(
            'Good job!',
            'You clicked the button!',
            'success'
        )
    }

    function fireInfoAlert() {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'You clicked the button!'
        })
    }

    function showError() {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Something went wrong!'
        })
    }

    function showMessage() {
        Swal.fire('Simple message')
    }

    function showAlertTopEnd() {
        Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: 'Display this alert in top right corner',
            showConfirmButton: false,
            timer: 2500
        })
    }

    function showDialogWithPassingParams() {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                )
            }
        })
    }

</script>
</body>
</html>

Read more

  1. Sweetalert2
  2. Sweetalert2 - github page
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more