Öncelikle </head> etiketimizin üzerine aşağıdaki kodu ekliyoruz;
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">Ardından <body> - </body> etiketlerimizin arasına aşağıdaki JS kodunu ekliyoruz;
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
function basarili() {
swal("Tebrikler!", "Buraya dilediğiniz birşeyi yazabilirsiniz.", "success"); // Onay/Başarılı Mesajı
}
function hata() {
swal("Hata!", "Buraya dilediğiniz birşeyi yazabilirsiniz.", "error"); // Hata Mesajı
}
function normal() {
alert('Bu bir normal mesajdır.'); // Sıradan Kutucuk
}
</script>Ve son olarak, aşağıdaki kodları websitemizin kullanacağımız alanına ekliyoruz.<button onclick="normal()">Normal</button> <!-- Normal Kutucuk --> <button onclick="basarili()">Başarılı</button> <!-- Başarılı Kutucuk --> <button onclick="hata()">Hata</button> <!-- Hatalı Kutucuk -->DEMO | İNDİR | VIRUSTOTAL
