Toast Kullanımı

Örnek
 
<!DOCTYPE html>
<
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
>
<html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="bootstrap-5.3.5-dist/css/bootstrap.min.css" />
</head>
<body>


    <button type="button" class="btn btn-primary" id="toastBtn">
        Bildirimi Göster
    </button>

<div class="toast-container position-fixed bottom-0 end-0 p-3 ">
    <div id="liveToast" class="toast text-bg-primary" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="500">
        <div class="toast-header">
            <strong class="me-auto">Sistem Mesajı</strong>
            <small>Şimdi</small>   

            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            İşlem başarıyla tamamlandı! ?
        </div>
    </div>
</div>

</body>
</html>

<script src="bootstrap-5.3.5-dist/js/bootstrap.bundle.min.js"></script>


<script>
    /*const toastElement = document.getElementById('liveToast');
     
     // Butona tıklandığında çalışacak fonksiyon
     document.getElementById('toastBtn').addEventListener('click', () => {
     // Bootstrap Toast objesini oluştur/yakala
     const toast = new bootstrap.Toast(toastElement);
     
     // Toast'u göster
     toast.show();
     });*/

    //new bootstrap.Toast(document.getElementById('liveToast')).show();
</script>
 
Yükleniyor...
    Yükleniyor...