Membuat Animasi Alert Menggunakan AlertifyJS

AlertifyJS adalah suatu plugin animasi alert yang dapat kita gunakan dengan mudah dan gratis. Cara menggunakannya cukup mudah. teman-teman siapkan terlebih dahulu struktur html yang berisi tombol atau button untuk menjalankan animasi alertnya seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Animasi Alert Menggunakan AlertifyJS</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row text-center">
            <div class="col-12">
                <h1>Membuat Animasi Alert Menggunakan AlertifyJS</h1>
                <button class="btn btn-sm btn-success" id="alert">Alert Dialog</button>
                <button class="btn btn-sm btn-primary" id="confirm">Confirm Dialog</button>
                <button class="btn btn-sm btn-secondary" id="prompt">Prompt Dialog</button>
            </div>
        </div>
    </div>
</body>

</html>

Didalam struktur html saya menyediakan 3 tombol, dan masing-masing tombol saya gunakan untuk menampilkan alert, confirm dan prompt. Selanjutnya teman-teman kunjungi alertifyjs disini dan download filenya. Jika sudah sematkan link css dan javascript di bawah ini.

<link rel="stylesheet" href="alert/themes/alertify.core.css" />
<link rel="stylesheet" href="alert/themes/alertify.default.css" id="toggleCSS" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="alert/lib/alertify.min.js"></script>

 Tahap selanjutnya teman-teman buat satu fungsi reset() dan tiga event alert, confirm dan prompt seperti berikut ini.

<script>
        function reset () {
            $("#toggleCSS").attr("href", "alert/themes/alertify.default.css");
            alertify.set({
                labels : {
                    ok     : "OK",
                    cancel : "Cancel"
                },
                delay : 5000,
                buttonReverse : false,
                buttonFocus   : "ok"
            });
        }

        // Standard Dialogs
        $("#alert").on( 'click', function () {
            reset();
            alertify.alert("This is an alert dialog");
            return false;
        });

        $("#confirm").on( 'click', function () {
            reset();
            alertify.confirm("This is a confirm dialog", function (e) {
                if (e) {
                    alertify.success("You've clicked OK");
                } else {
                    alertify.error("You've clicked Cancel");
                }
            });
            return false;
        });

        $("#prompt").on( 'click', function () {
            reset();
            alertify.prompt("This is a prompt dialog", function (e, str) {
                if (e) {
                    alertify.success("You've clicked OK and typed: " + str);
                } else {
                    alertify.error("You've clicked Cancel");
                }
            }, "Default Value");
            return false;
        });
    </script>

Jika teman-teman buka dihalaman browser maka akan seperti pada gambar di bawah ini.

Membuat Animasi Alert Menggunakan AlertifyJS

Demikian artikel tentang cara Membuat Animasi Alert Menggunakan AlertifyJS. Semoga dapat bermanfaat dan selamat mencoba.

20 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat