Kullanıcının bu mesajı görip görmeyeceği tercihini veritabanında ya da tarayıcının storage'ında tutabilirsiniz:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Bir Daha Gösterme</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<div id="customAlert" class="alert alert-warning alert-dismissible fade show" role="alert" style="display: none;">
<strong>Bilgilendirme!</strong> Bu önemli bir mesajdır.
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" value="" id="dontShowAgainCheck">
<label class="form-check-label" for="dontShowAgainCheck">
Bir daha gösterme
</label>
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<script>
const alertBox = document.getElementById('customAlert');
const dontShowAgainCheck = document.getElementById('dontShowAgainCheck');
// Daha önce gösterilmeme tercihi kontrolü
if (!localStorage.getItem('hideCustomAlert')) {
alertBox.style.display = 'block';
}
// Alert kapatıldığında kontrol et
alertBox.addEventListener('close.bs.alert', function () {
if (dontShowAgainCheck.checked) {
localStorage.setItem('hideCustomAlert', 'true');
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>