Uyarı (Alert) Mesajı Sınıf
Alert sınıfı ile primary, success, info, warning, danger, secondary, dark, light arka plan renkle<br />rine sahip, dikkat çekici mesaj kutuları oluşturulabilir (Görsel 4.42). En temel kullanım şekli aşa<br />ğıdaki örnek kodlarda görülmektedir.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="./bootstrap-5.3.3-dist/css/bootstrap.css">
<script src="./bootstrap-5.3.3-dist/js/bootstrap.js"></script>
<style>
body,
html {
height: 100vh;
}
.animasyonGiris {
animation: giris 500ms;
}
.animasyonCikis {
animation: cikis 500ms;
}
@keyframes giris {
0% {
transform: scale(0.1);
/* rotate: 0deg; */
}
100% {
transform: scale(1);
/* rotate: 360deg; */
}
}
@keyframes cikis {
0% {
transform: scale(1);
/* rotate: 360deg; */
}
100% {
transform: scale(0.1);
/* rotate: 0deg; */
}
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center h-100" style="font-size: 20px; font-weight: 700;">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">İsim</label>
<input id="adSoyad" type="text" class="form-control text-bg-dark">
<br>
<button id="buton" class="btn btn-dark">Submit</button>
</div>
</div>
<div id="popup" class="alert alert-danger d-none position-absolute"
style="bottom: 30px; right: 20px; font-size: 20px; font-weight: 400;" role="alert">
Lütfen bir değer giriniz
</div>
</body>
<script>
let textBox = document.getElementById("adSoyad");
let PopUp = document.getElementById("popup");
document.getElementById("buton").addEventListener("click", function () {
if (textBox.value == '') {
PopUp.classList.add("animasyonGiris");
PopUp.classList.add("d-inline");
PopUp.classList.remove("d-none");
setTimeout(() => {
PopUp.classList.remove("animasyonGiris");
PopUp.classList.add("animasyonCikis");
}, 3500)
setTimeout(() => {
PopUp.classList.remove("d-inline");
PopUp.classList.add("d-none");
PopUp.classList.remove("animasyonCikis");
}, 4000);
}
})
</script>
</html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="./bootstrap-5.3.3-dist/css/bootstrap.css">
<script src="./bootstrap-5.3.3-dist/js/bootstrap.js"></script>
<style>
body,
html {
height: 100vh;
}
.animasyonGiris {
animation: giris 500ms;
}
.animasyonCikis {
animation: cikis 500ms;
}
@keyframes giris {
0% {
transform: scale(0.1);
/* rotate: 0deg; */
}
100% {
transform: scale(1);
/* rotate: 360deg; */
}
}
@keyframes cikis {
0% {
transform: scale(1);
/* rotate: 360deg; */
}
100% {
transform: scale(0.1);
/* rotate: 0deg; */
}
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center h-100" style="font-size: 20px; font-weight: 700;">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">İsim</label>
<input id="adSoyad" type="text" class="form-control text-bg-dark">
<br>
<button id="buton" class="btn btn-dark">Submit</button>
</div>
</div>
<div id="popup" class="alert alert-danger d-none position-absolute"
style="bottom: 30px; right: 20px; font-size: 20px; font-weight: 400;" role="alert">
Lütfen bir değer giriniz
</div>
</body>
<script>
let textBox = document.getElementById("adSoyad");
let PopUp = document.getElementById("popup");
document.getElementById("buton").addEventListener("click", function () {
if (textBox.value == '') {
PopUp.classList.add("animasyonGiris");
PopUp.classList.add("d-inline");
PopUp.classList.remove("d-none");
setTimeout(() => {
PopUp.classList.remove("animasyonGiris");
PopUp.classList.add("animasyonCikis");
}, 3500)
setTimeout(() => {
PopUp.classList.remove("d-inline");
PopUp.classList.add("d-none");
PopUp.classList.remove("animasyonCikis");
}, 4000);
}
})
</script>
</html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="boost/bootstrap-5.3.3-dist/css/bootstrap.min.css">
<script src="boost/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<style>
#uyarı
{
transition: all 1s;
}
</style>
</head>
<body style="height: 100%;">
<div class="container position-absolute" style="top: 10px; ">
<div class="form-control">
<label for="">Ad:</label>
<input id="ad" class="form-control" type="text"> <br>
<label for="">Soyad:</label>
<input id="soyad" class="form-control" type="text"> <br>
<button id="gonder" class="btn btn-primary mb-3">GONDER</button>
</div>
</div>
<div id="uyarı" class="alert alert-danger alert-dismissible position-absolute opacity-100" style="right: 20px; bottom:10px;">
<button onclick="kaldir()" type="button" class="close" data-dismiss="alert">×</button>
<strong>Uyarı!</strong>Kullanıcı bilgileri eksik girildi.
</div>
<script>
document.getElementById("gonder").addEventListener("click",run);
function run(){
if(document.getElementById("ad").value=="" || document.getElementById("soyad").value=="")
{
document.getElementById("uyarı").className="alert alert-danger alert-dismissible position-absolute opacity-100";
}
}
function kaldir(){
document.getElementById("uyarı").className="alert alert-danger alert-dismissible position-absolute opacity-0";
}
</script>
</body></html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="boost/bootstrap-5.3.3-dist/css/bootstrap.min.css">
<script src="boost/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<style>
#uyarı
{
transition: all 1s;
}
</style>
</head>
<body style="height: 100%;">
<div class="container position-absolute" style="top: 10px; ">
<div class="form-control">
<label for="">Ad:</label>
<input id="ad" class="form-control" type="text"> <br>
<label for="">Soyad:</label>
<input id="soyad" class="form-control" type="text"> <br>
<button id="gonder" class="btn btn-primary mb-3">GONDER</button>
</div>
</div>
<div id="uyarı" class="alert alert-danger alert-dismissible position-absolute opacity-100" style="right: 20px; bottom:10px;">
<button onclick="kaldir()" type="button" class="close" data-dismiss="alert">×</button>
<strong>Uyarı!</strong>Kullanıcı bilgileri eksik girildi.
</div>
<script>
document.getElementById("gonder").addEventListener("click",run);
function run(){
if(document.getElementById("ad").value=="" || document.getElementById("soyad").value=="")
{
document.getElementById("uyarı").className="alert alert-danger alert-dismissible position-absolute opacity-100";
}
}
function kaldir(){
document.getElementById("uyarı").className="alert alert-danger alert-dismissible position-absolute opacity-0";
}
</script>
</body></html>
Yorumunuzu Ekleyin
